Difference between revisions of "Liquid Template Variables - image"
From Spiffy Stores Knowledge Base
m (→image.type) |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 16: | Line 16: | ||
== <code>image.collection_id</code> == | == <code>image.collection_id</code> == | ||
| − | |||
Returns the unique internal number of the collection that the image belongs to. | Returns the unique internal number of the collection that the image belongs to. | ||
| Line 61: | Line 60: | ||
Returns the height of the image in pixels. | Returns the height of the image in pixels. | ||
== <code>image.aspect_ratio</code> == | == <code>image.aspect_ratio</code> == | ||
| − | Returns the aspect ratio ( | + | Returns the aspect ratio (''width'' / ''height'') of the image. |
== <code>image.attached_to_variant?</code> == | == <code>image.attached_to_variant?</code> == | ||
Latest revision as of 11:22, 14 July 2020
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:
Contents
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.