Skip to main content

Image

An Image input lets the marketer upload and manage images in the Email Editor.

Works great for:

  • Hero images and other primary visuals in an email

  • Product shots, logos, and content imagery that should be swapped per campaign

  • Background images rendered via the resizeImage filter

Validation is optional and can be enabled per input when needed:

  • Required can make the image mandatory before review/export

  • Must change from default can force the marketer to replace the starting image

  • Minimum width / height and Maximum width / height can restrict the intrinsic image dimensions that are allowed for that slot

These size rules are checked in the Email Editor for both uploaded files and image URLs. The same rules are also respected when Betty AI updates an image input.

Image setting​

In this example the snippet imgTag is used

Image object properties​

Image inputs expose an object in Liquid. The most common properties are:

  • {{ image.url }} - Outputs the URL of the image, resized with the width and DPR provided in the options.

  • {{ image.originalUrl }} - Outputs the original URL. Use it together with the resizeImage filter when you need custom resizing behavior.

  • {{ image.altText }} - Outputs the built-in alt text value when Alt Text is enabled on the image input.

  • {{ image | imgTag }} - Outputs a complete <img> tag, read more about the imgTag filter.

In the Template Editor autocomplete, typing {{ setting_key.image_input. }} will suggest the available image properties.

DPR​

DPR stands for Device Pixel Ratio and lets you request a sharper source image for high-density screens. For example, if you have a 200x200 image and set the DPR to 2, the rendered source will be 400x400.

Additional variables are exposed on the image object with the width and height, which is useful for setting width/height in <img> attributes and in style attributes.

  • {{ image.width }} - The width of the image in pixels (after automatic resizing). It ignores the DPR, so if width: 320 and DPR: 2 is set in options, image.width will output 320.

  • {{ image.height }} - The height of the image. If image resizing is used with width only, the image will be resized preserving aspect ratio, and the outputted height will be the resulting height.

Built-in alt text​

Image inputs can now collect alt text directly as part of the image input itself.

In the Template Editor:

  • enable Show Alt Text Field on the image input to show the field to marketers
  • optionally enable Require Alt Text to make it mandatory when an image is selected
  • if Must change from default is enabled on the image input, the marketer must also change the built-in alt text from its default value when Alt Text is enabled

Image dimension validation​

Image inputs can optionally enforce intrinsic size requirements from the Validation section in the Template Editor.

Common examples:

  • require a hero image to be at least 1200px wide
  • require a product image to be at least 600px tall
  • cap a logo at 800px wide so oversized source files are rejected

When one of these rules is enabled, Better Email checks the selected image before saving the new value. If the image is too small or too large, the editor shows a clear error and keeps the previous valid image value in place.

In Liquid, you can either use the stored value directly:

{{ hero.image.altText }}

Or let imgTag use it automatically:

{{ hero.image | imgTag }}

You only need to pass altText: manually when you want to override the stored value.

Edit images instantly​

Better Email can calculate the dimensions of any uploaded image. Simply write .height after your image setting, and the height of the image will be displayed. fx

{{ full_image.image.height }}