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.