Liquid Template Variables - image

From Spiffy Stores Knowledge Base

The Liquid template variable image cannot be invoked on its own. It is only available as a result of calling the image attributes on product and collection variables.

The variable has the following attributes:

Returns the unique internal number of the image.

This is normally only for internal usage.


Returns the unique internal number of the product that the image belongs to.

This value is the same as


Returns the unique internal number of the collection that the image belongs to.

This value is the same as


Returns the position of the image within the collection of images belonging to the product or collection.

It is the same as the value of forloop.index when you iterate through the array of images returned by product.images or collection.images.

The featured, or first, image of the product or collection will always have a position value of 1.


Returns the relative URL path of the image.

For example, use image.src in conjunction with product_img_url to generate image tags.

{% for image in product.images %}
<div class="thumbnail">
  <a href="{{ image.src | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
    <img src="{{ image.src | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
{% endfor %}

When using a product image, use the product_img_url filter.

For a collection image, use the collection_img_url filter.

You can also use image by itself, as this is equivalent to image.src.


Returns the description of the image. If no description is available, the title of the product or collection to which the image belongs is returned.


Returns the type of the image's parent. For example, an image belonging to a product, will return a type of Product. A collection image will return Collection.


Returns the width of the image in pixels.


Returns the height of the image in pixels.


Returns the aspect ratio (width / height) of the image.


Return true if the image is currently associated with a variant, or false if this is not the case.


Return an array of all the variants that are associated with this image.

{% for image in product.images %}
  {% for variant in image.variants %}
    {{ image.src }} - used for the variant: {{ variant.title }}
  {% endfor %}
{% endfor %}

Note: The variant returned does not include any custom options.