image

Properties

Anchor to

alt

string

The alt text of the image.

Anchor to

aspect_ratio

number

The aspect ratio of the image as a decimal.

Anchor to

attached_to_variant?

boolean

Returns true if the image is associated with a variant. Returns false if not.

The attached_to_variant? property is only available for images accessed through the following sources:

• product.featured_image
• product.images

If you reference this property on an image from another source, then nil is returned.

Anchor to

height

number

The height of the image in pixels.

Anchor to

id

number

The ID of the image.

If you reference the id property for preview images of generic_file or media objects, then nil is returned.

Anchor to

media_type

string

The media type of the image. Always returns image.

The media_type property is only available for images accessed through the following sources:

• product.media
• file_reference type metafields

If you reference this property on an image from another source, then nil is returned.

Example

Filter for media of a specific type

You can use the media_type property with the where filter to filter the product.media array for all media of a desired type.

CodeData

Reset Code

9

1

2

3

4

5

{% assign images = product.media | where: 'media_type', 'image' %}

{% for image in images %}

{{- image | image_url: width: 300 | image_tag }}

{% endfor %}

Code

{% assign images = product.media | where: 'media_type', 'image' %}

{% for image in images %}
  {{- image | image_url: width: 300 | image_tag }}
{% endfor %}

Data

{
  "product": {
    "media": [
      "products/oil-dripping-into-jar.jpg"
    ]
  }
}

Output

9

1

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/products/oil-dripping-into-jar.jpg?v=1650399519&amp;width=300" alt="Viper venom" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/products/oil-dripping-into-jar.jpg?v=1650399519&amp;width=300 300w" width="300" height="200">

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/products/oil-dripping-into-jar.jpg?v=1650399519&amp;width=300" alt="Viper venom" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/products/oil-dripping-into-jar.jpg?v=1650399519&amp;width=300 300w" width="300" height="200">

Anchor to

position

number

The position of the image in the product.images or product.media array.

The position property is only available for images that are associated with a product. If you reference this property on an image from another source, then nil is returned.

Anchor to

presentation

image_presentation

The presentation settings for the image.

Anchor to

preview_image

image

A preview image for the image.

The preview_image property is only available for images accessed through the following sources:

• product.featured_media
• product.media
• file_reference type metafields

If you reference this property on an image from another source, then nil is returned.

Anchor to

product_id

number

The ID of the product that the image is associated with.

The product_id property is only available for images associated with a product. If you reference this property on an image from another source, then nil is returned.

Anchor to

src

string

The relative URL of the image.

Anchor to

variants

array of variant

The product variants that the image is associated with.

The variants property is only available for images accessed through the following sources:

• product.featured_image
• product.images

If you reference this property on an image from another source, then nil is returned.

Anchor to

width

number

The width of the image in pixels.