Liquid Template Variables - image

From Spiffy Stores Knowledge Base

Revision as of 11:22, 14 July 2020 by Admin (talk | contribs) (→‎image.aspect_ratio)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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:

image.id

Returns the unique internal number of the image.

This is normally only for internal usage.

image.product_id

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

This value is the same as product.id.

image.collection_id

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

This value is the same as collection.id.

image.position

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.

image.src

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 }}" />
  </a>
</div>
{% 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.

image.alt

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.

image.type

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.

image.width

Returns the width of the image in pixels.

image.height

Returns the height of the image in pixels.

image.aspect_ratio

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

image.attached_to_variant?

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

image.variants

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.