Image Tag HTML Objects

When you are working with images in your templates you will usually be working with an HTML Object. An example scenario would be displaying images for gallery items, store products, collection widgets or content layout images. Pretty much any time you would have an array of image information that array is actually an HTML Object.

The purpose of the HTML Object is to allow you to add or change the attributes for the image tag before outputting the image tag. Instead of having to manually build out the image tag just to set a custom alt text or class value you can set the attribute value and then simply output the image tag. This helps with readability and is often easier to write.

Instead of doing this:

<img src="{{ image.src }}" width="{{ image.width }}" height="{{ image.height }}" alt="My Alt Text">

now you can set the alt text and then simply output the code:

{% set image.alt = 'My Alt Text' %}
{{ image.tag }}

Available image attributes

Typically the following image attributes are available for you to set or change values:

  • alt
  • class
  • height
  • src
  • width

'class' and 'alt' may not always have values.

You can also set any valid HTML attribute on the image tag such as 'title' or 'data' attributes.

{% set image.title = 'My image title' %}
{% do image.set('data-custom', 'Data value') %}

See HTML Objects for more information about setting attribute values.