liquid/_posts/objects/image.md

layout, title, nav

layout	title	nav
default	image	group Liquid Variables

image

The image object has the following attributes:

{% table_of_contents %}

{% anchor_link "image.alt", "image-alt" %}

Returns the alt tag of the image, set in the Products page of the Admin.

{% anchor_link "image.id", "image-id" %}

Returns the id of the image.

{% anchor_link "image.product_id", "image-product_id" %}

Returns the id of the image's product.

{% anchor_link "image.position", "image-position" %}

Returns the position of the image, starting at 1. This is the same as outputting forloop.index.

{% anchor_link "image.src", "image-src" %}

Returns the relative path of the product image. This is the same as outputting {{ image }}.

Input

{% highlight html %}{% raw %} {% for image in product.images %} {{ image.src }} {{ image }} {% endfor %} {% endraw %}{% endhighlight %}

Output

{% highlight html %}{% raw %} products/my_image.jpg products/my_image.jpg {% endraw %}{% endhighlight %}

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 product_img_url filter.

Input

{% highlight html %}{% raw %} {{ image | product_img_url: "medium" }} {% endraw %}{% endhighlight %}

Output

{% highlight html %}{% raw %} //cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311 {% endraw %}{% endhighlight %}