Skip to main content

Image

All great campaigns contain images. That is why we've done our best to make it easy for anyone to edit and work with images.

Image setting​

In this example the snippet imgTag is used

The 3 image workers​

You can reference a image in your template code in 3 ways:

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

  • {{ image.originalUrl }} - Outputs the Original URL. Should only be used in together with the resizeImage filter to make sure image is probably resized and served from CDN.

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

DPR​

DPR stands for Device Pixel Ratio and gives you the option to input a number that will multiply the size of the image dimensions with the number you provide. Fx. if you have a 200x200 image, and set the DPI to 2, then the output 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.

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 }}