> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.laposta.org/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.laposta.org/_mcp/server. # Making images editable with template tags > Make images in an imported HTML template editable and configure whether the size and link may be adjusted. 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. > **Note** > > 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](/welke-opties-biedt-laposta-bij-een-zelfgemaakt-sjabloon). ## A standalone image with `` 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. **`lp-edit`** Makes an image editable. --- **`lp-label`** Shows the entered value in the editor above the spot where the image can be changed. --- **`lp-resizable`** Indicates that the size of the image may be adjusted. --- **`lp-max-width`** Indicates the maximum width to which the image may be enlarged. --- **`lp-min-width`** Indicates the minimum width to which the image may be reduced. --- **`lp-no-import`** 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. --- **`lp-no-imageedit`** By default, all editable images can also be adjusted using the [image editor](/afbeeldingen-bewerken) when filling in the template. With this attribute, you disable that option for this image. --- **`lp-disable-href`** Prevents the editor from placing a link behind the image. --- **`lp-decorative`** 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: ```html ``` An image wrapped in a default link, which can be scaled between 100 and 300 pixels wide: ```html ``` ## An image inside `` An image can also be placed inside a [text field](/tags-om-tekst-te-wijzigen). 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. **`lp-disable-resizable`** Prevents the size of the image from being adjusted. --- **`lp-disable-moving`** Prevents the editor from moving the image to the left, to the right, or across the full width. --- **`align`** Determines the position of the image: `left` for the left side of the text and `right` for the right side. --- **`hspace, vspace`** 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. ```html 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. ``` ### 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. ```css /* responsive image inside multiline */ .lp-image-wrapper { width:100% !important; } .lp-image-wrapper-h { display: none !important; } .lp-image-wrapper-img { display: block !important; width: 100% !important; overflow: auto !important; } .lp-multiline-image { width: 100% !important; height: auto !important; margin: 0 !important; } ``` ## Related articles #### [Making text editable with template tags](/tags-om-tekst-te-wijzigen) Make single lines of text and longer text blocks editable in your own HTML template. #### [Placing a video screenshot with a template tag](/tags-om-video-screenshot-te-wijzigen) Automatically place a clickable screenshot with a play button of a YouTube or Vimeo… #### [Editing and resizing an image](/afbeeldingen-bewerken) Use the image editor to adjust the brightness, contrast, dimensions and file size of an… #### [Placing and editing an image in a Joe template](/hoe-bewerk-ik-een-afbeelding-in-mijn-sjabloon-op-maat-type-joe) How to place, crop, scale or move fixed and scalable images in your Joe template.