Making images editable with template tags
In a custom HTML template, you place images in the usual way. If you want to make an image editable, add an attribute: either as a standalone image in the template using lp-edit, or inside a text field with the text wrapping around it.
These tags only apply to an imported HTML template, not to the drag & drop editor. To learn how to import a template, see Importing a custom template in Laposta.
A standalone image with <img>
Add the lp-edit attribute to the img tag to make the image editable. The img tag must always include a width attribute.
If the src attribute contains a URL to an image, it will appear as the initial image. If you do not have an image on hand, leave the src empty. Laposta will then display a default placeholder image.
When editing, the editor can place a link behind the image. If there is already a link wrapped around the img tag in the template, Laposta will use that as the default value.
Options
These attributes determine what the editor can do with the image in the editor.
Makes an image editable.
Shows the entered value in the editor above the spot where the image can be changed.
Indicates that the size of the image may be adjusted.
Indicates the maximum width to which the image may be enlarged.
Indicates the minimum width to which the image may be reduced.
By default, Laposta imports all images in a template and serves them from Laposta. With this attribute, you specify that an image should not be imported and must be loaded from its original URL.
When this attribute is active, the image cannot be resized.
By default, all editable images can also be adjusted using the image editor when filling in the template. With this attribute, you disable that option for this image.
Prevents the editor from placing a link behind the image.
A decorative image is purely intended for design purposes and is not relevant to the content of the newsletter, such as a small arrow in front of a link. For accessibility reasons, entering alt text is not permitted for this type of image. With this attribute, you indicate that it is a decorative image. The interface will then not ask for alt text.
Examples
The minimum required for an editable image, without an initial image:
An image wrapped in a default link, which can be scaled between 100 and 300 pixels wide:
An image inside <lp-multiline>
An image can also be placed inside a text field. The text will then wrap around it. When editing, the editor can place the image on the left, on the right, or across the full width of the text field, using the arrows on the left and right of the multiline box. The size can be adjusted by default, and the lp-edit attribute is not needed here.
Options
In addition to placement and whitespace, you mainly use these attributes to set what the editor is not allowed to change. The same rules apply to lp-label and lp-decorative as for a standalone image.
Prevents the size of the image from being adjusted.
Prevents the editor from moving the image to the left, to the right, or across the full width.
Determines the position of the image: left for the left side of the text and right for the right side.
Indicates how much whitespace is added around the image so that the text does not touch it: hspace for horizontal space and vspace for vertical space.
These are standard HTML attributes. When rendering, Laposta replaces them with a table around the image. This is the only way to display the whitespace properly across all email clients.
Example
Here, the image is positioned on the right side of the text, with 10 pixels of whitespace around it. The editor can adjust the width between 100 and 300 pixels.
Making the multiline with an image responsive
Because the image is placed inside a table to create the whitespace, a few extra lines of CSS are needed to display the multiline properly on smaller screens. Include these rules inside a media query. The text will then appear below the image, with the image set to 100% width.