Skip to main content

resizeImage filter

The resizeImage filter works similarly to the imgTag filter, but it outputs the image URL instead of a full <img> tag. Use it when you need custom HTML or want to render a background image.

We use Cloudflare's Image Optimization behind the scenes. If you want deeper reference material on the available arguments and behavior, the Cloudflare docs are the best source.

When using the resizeImage filter together with an Image input, you need to reference the originalUrl property. This is because the url property will contain an already-resized URL based on the Image input options. With resizeImage, we want the original image and do the resizing ourselves.

Basic example​

Input
{{ my_module.my_image.originalUrl | resizeImage: width: 200 }}
Output
https://assets.better.email/1/f13fd181-31d3-41cb-a9e2-b5ef9449cf3c.png

You can use it in your HTML template code like below.

<img src="{{ my_module.my_image.originalUrl | resizeImage: width: 200 }}" width="200" height="150" />

Notice you have to specify the width and height yourself. It's possible to calculate the height based on the inputted width and the aspect ratio of the original image in Liquid:

{% assign newHeight = my_module.my_image.height | divided_by: my_module.my_image.width | times: 200 %}
<img src="{{ my_module.my_image.originalUrl | resizeImage: width: 200 }}" width="200" height="{{ newHeight }}" />

Additional arguments​

  • width - Overwrites the width provided in Image input options and uses this value for resizing

  • height - Sets the height explicitly and resizes based on this, depending on fit argument.

  • dpr - Overwrites the dpr provided in Image input options and uses this value for resizing.

  • fit - Affects interpretation of width and height. All resizing modes preserve aspect ratio. Read about the options here.

  • background - Sets a background color for the resulting image, used together with fit=pad.