resizeImage filter

The resizeImage filter works in a similar fashion to the imgTag filter, however it outputs the image url and not an entire <img> tag. This is great for cases where you need a very custom <img> tag, or you need a background image.

We use Cloudflare's Image Optimization behind the scenes. It can be useful to their docs, to learn more about the arguments and behaviour.

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

{{ my_component.my_image.originalUrl | resizeImage: width: 200 }}

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_component.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_component.my_image.height | divided_by: my_component.my_image.width | times: 200 %}
<img src="{{ my_component.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.