Editable images

Enables option to replace a placeholder image. Users can upload and format their images in the visual editor, and export the final image files when they export their page or email. When you first import your theme HTML, all images are automatically enabled as editable.

Visual theme editor

To make changes to which images are editable using the visual theme editor: click the Edit button at the top to go into edit mode. Make sure you have the Content icon () selected from the left sidebar. Then click on any image with a box with a dashed line around it. You will see options on the left side panel for properties you can set for the image:

• Whether it is enabled or disabled as being editable; enabled by default
• The unique variable name for it; autogenerated initially, can be changed
• Whether or not it can be removed; disabled by default
• Whether or not a link can be added to it; enabled by default
• Whether an image should resize when it's replaced or crop and scale to the placeholder size; not resizable by default
• Whether the image height should automatically adjust when the image is replaced; disabled by default

Editable tags code

block-edit

Example

<img class="block-edit" src="image.jpg" width="400" height="200">

Setting a height: auto CSS style for the image allows changing the cropping height to any size. When cropping is shown, clicking the Skip button scales the image to the placeholder image width and adjusts the height automatically to be proportional.

Adding variable names to images saves their content. Each unique image requires its own variable name. Using the same variable name on multiple images will update images for all areas when one is updated.

data-block="variable-name"

Example

<img class="block-edit" data-block="example-name" src="image.jpg" width="400" height="200">

Resize

Allows placeholder image to get resized to size of new image.

Skips cropping modal and placeholder area gets resized to both the width and height of new image. Pixel density of the placeholder image is taken into account and matches new image's size.

block-resize

Including min-width and max-width, and min-height and max-height styles sets size limits to stay within.

Example

<img class="block-edit block-resize" src="image.jpg" width="400" height="200" style="min-width:50px; max-width:600px">

Disable

block-no-image

Disables image editing options and keeps just the link option.

Remove

block-remove

Allows an image to be removed.

Links

A link on an image is editable by default. If an editable image doesn't have a link, it can be added as part of the image's editing options.