imgTag filter

The imgTag filter is a helper method in Liquid, that will make it much easier to work with images in your template code.

It's always used together with an Image input. It ouputs an img tag, with height and a style attribute with both width and height set. This is the best practice for dealing with images with a fixed width. The url outputted in the src tag, will be the resized version of the image, served from a CDN.

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

Basic example

Input

{{ my_component.my_image | imgTag }}

Output

<img src="..." height="..." style="width: ...; height: ..." />

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.

• style - Adds additional values to the style attribute of the outputted img tag.

• class - Adds a class attribute to the outputted img tag with the classes specified here.

• altText - Adds alt attribute to outputted img tag

Advanced example

Input

{{ my_component.my_image | imgTag: width: 200, height: 150, dpr: 2, fit: 'cover', style: 'border: 1px solid red;', class: 'my-image', alt: 'My Image'  }}

Output

<img alt="My Image" class="my-image" src="..." height="150" style="width: 200px; height: 150px; border: 1px solid red;"/>