← Template Editing

Editable images

Enables option to replace an image.

block-edit or -block-edit: true

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 template 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" or -block-var: variable-name

Example

Resizable

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 template placeholder image is taken into account and matches new image's size.

block-resize or -block-resize: true

Example

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

Disable image

To disable image editing options and keep just the link option.

block-no-image or -block-image: false

Remove

Allows an image to be removed.

block-remove or -block-remove: true

Example

Template editor

In the template editor, go into edit mode, and with the content icon () chosen on the left, start selecting images that you want to make editable within your template. Editable options will appear in the sidebar on the left. Click Update to enable the options. And Save to go into template preview mode to see the results.

When an image in an email is uploaded in place of a current one, an option to crop the image is given, limited to the proportions of the original source image.

The source of each individual image can by overridden with the image's URL option. There is also an option for the image's alt text.

Related

• Video: content how to →
• Editable text →
• Editable links →