Help

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 email or landing page.

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 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" or -block-var: 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 or -block-resize: true

Example

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

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

Disable

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:

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

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

Support

Still have questions? Message us.