Tags to edit an image
Please note: These tags are not relevant to the drag & drop editor.
Images <img>
You can use images in your template in the regular way. To make an image editable, add the attribute <code>lp-edit</code>. It is also possible to indicate that the image may be resized.
If the src attribute of the img tag contains a URL to an image, this image will be displayed as the starting image. If you don't have an image available, you can leave the src empty; a standard image will then be shown.
During editing, it is possible to insert a link behind the image. If there is a link around the img tag in the template, this will be used as default value.
Important: The img tag should always contain a width attribute.
Options
lp-edit
This can be used to indicate that an image is editable.
lp-label
The value of this attribute is shown in the editor above the location that can be used to edit this image.
lp-resizable
Include this attribute to indicate that the image may be resized.
lp-max-width
With this attribute you can specify the maximum width that can be used to enlarge the image.
lp-min-width
With this attribute you can specify the minimum width to which the image may be reduced.
lp-no-import
By default, all images in a template are imported and displayed from Laposta. With this attribute you indicate that the image may not be imported and must be loaded from the original URL.
If this attribute is active, the image cannot be resized.
lp-no-scaling
By default, all images uploaded while filling the template are scaled to the required size by Laposta. With this attribute you indicate that this should not happen to the image. In that case, the scaling is left to the application that displays the email (the browser or email client).
This option may be necessary if the image being uploaded has been edited to fit just right, and would suffer from further editing.
Note: animated gifs are never scaled.
lp-no-imageedit
By default, all editable images can also be edited with the image editor that is available when filling the template. With this tag, you can indicate that that feature can no longer be available for the relevant image.
lp-disable-href
By default, you can place a link behind an image. If you do not want this option, you can include this attribute.
Example
Minimum for editable image:
img lp-edit src="" width="200"
Resizable within certain limits, and a standard link:
<a href="http://example.net"><img lp-edit lp-resizable lp-min-width="100" lp-max-width="300" src="http://example.net/image.jpg" width="200"></a>
Images within a text field <lp-multiline> <img>.
Just like in the text field above, it is possible to include an image within a multiline. The text will then wrap around the image, and when editing, the image can be positioned to the left, right, or across the full width of the text field. The image is resizable by default.
Options
lp-label
The value of this attribute is shown in the editor above the location that can be used to edit this image.
lp-disable-resizable
Disables resizing of the image.
lp-disable-moving
By default, an image within a multiline can be positioned to the left, right, or displayed over the full width (with arrows to the left and right of the multiline field). Add this attribute to disable this.
align
This is to determine the position of the image: left for the left side of the text and right for the right side.
hspace, vspace
Usually the text should not touch the image. With these attributes you can specify how much white space should be used around the image. (hspace for horizontal space, and vspace for vertical space).
By the way, these are standard HTML attributes, which are removed when displayed and replaced by a table that is placed around the image. This is the only way to correctly display white space in all email clients.
Example
Here, an image is placed on the right side of the text. The image can be resized within the limits of a width between 100 and 300 pixels. The white space around the image is 10 pixels. As you can see, it is not necessary to include an lp-edit attribute.
<lp-multiline lp-label="Hoofdalinea"><img lp-min-width="100" lp-max-width="300" src="http://example.net/image.jpg" width="200" align="right" hspace="10" vspace="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</lp-multiline>
Creating a responsive multiline with image
Displaying a multiline with an image properly on smaller screens requires a few extra lines of CSS. This is because the image is included in a table to guarantee white space around the image. The following CSS that is used in a media query, positions the text under the image, with the image at 100%.
/* responsive image inside multiline */
table[class="lp-image-wrapper"] {
width:100% !important;
}
td[class="lp-image-wrapper-h"] {
display: none !important;
}
td[class="lp-image-wrapper-img"] {
display: block; !important;
width: 100% !important;
overflow: auto !important;
}
img[class="lp-multiline-image"] {
width: 100% !important;
height: auto !important;
margin: 0 !important;
}