The image object
The image
object has the following attributes:
image.alt
Returns the alt tag of the image, set in the Products page of the Admin.
image.aspect_ratio
Returns the aspect ratio (width
/ height
) of the image.
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.height
Returns the height of the image in pixels.
image.id
Returns the id of the image.
image.media_type
Returns the media type of the object. For the image
object, this value will always be image
.
The media_type
property can be used to filter the product.media
array for all media of a desired type.
Input
{% assign images = product.media | where: "media_type", "image" %}
{% for image in images %}
{{ image.alt }}
{% endfor %}
Output
Image of the black stroller
Image of the grey stroller
image.position
Returns the position of the image in the product
object's media array.
image.preview_image
Returns a preview image for the image.
image.product_id
Returns the id of the image's product.
image.src
Returns the relative path of the product image. This is the same as outputting {{ image }}
.
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 Shopify's Content Delivery Network (CDN), 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
//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311
image.variants
Returns an array of attributes for the variant 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
image.width
Returns the width of the image in pixels.