image
The image object has the following attributes:
In this article
image.alt
Returns the alt tag of the image, set in the Products page of the Admin.
image.attached_to_variant?
Returns true if the image has been associated with a variant. Returns false otherwise. This can be used in cases where you want to create a gallery of images that are not associated with variants.
image.id
Returns the id of the image.
image.product_id
Returns the id of the image's product.
image.position
Returns the position of the image, starting at 1. This is the same as outputting forloop.index.
image.src
Returns the relative path of the product image. This is the same as outputting .
Input
{% for image in product.images %}
{{ image.src }}
{{ image }}
{% endfor %}
Output
products/my_image.jpg
products/my_image.jpg
To return the URL of the image on Haravan's Hstatic, use the appropriate URL filter.
To see a full list of available image sizes, see image size parameters.
Shown below is an example of loading a product image using the img_url filter.
Input
{{ image | img_url: "medium" }}
Output
//hstatic.net/206/1000001206/1000068949/slideshow_1_medium.jpg
image.variants
Returns the variant object(s) that the image is associated with.
Input
{% for image in product.images %}
{% for variant in image.variants %}
{{ image.src }} - used for the variant: {{ variant.title }}
{% endfor %}
{% endfor %}
Output
products/red-shirt.jpeg - used for the variant: Red
products/green-shirt.jpg - used for the variant: Green
products/yellow-shirt.jpg - used for the variant: Yellow