mirror of
https://github.com/kemko/liquid.git
synced 2026-01-06 18:25:41 +03:00
113 lines
2.1 KiB
Markdown
113 lines
2.1 KiB
Markdown
---
|
|
layout: default
|
|
title: image
|
|
|
|
nav:
|
|
group: Liquid Variables
|
|
---
|
|
|
|
# image
|
|
|
|
The <code>image</code> object has the following attributes:
|
|
|
|
<a id="topofpage"></a>
|
|
{% table_of_contents %}
|
|
|
|
|
|
|
|
|
|
{% anchor_link "image.alt", "image-alt" %}
|
|
|
|
<p>Returns the alt tag of the image, set in the <a href="http://docs.shopify.com/support/your-store/products/can-i-add-alt-text-to-my-product-images">Products</a> page of the Admin.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% 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 <a href="/themes/liquid-documentation/objects/for-loops/#index">forloop.index</a>.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% anchor_link "image.src", "image-src" %}
|
|
|
|
Returns the relative path of the product image. This is the same as outputting <code>{{ image }}</code>.
|
|
|
|
<p class="input">Input</p>
|
|
<div>
|
|
{% highlight html %}{% raw %}
|
|
{% for image in product.images %}
|
|
{{ image.src }}
|
|
{{ image }}
|
|
{% endfor %}
|
|
{% endraw %}{% endhighlight %}
|
|
</div>
|
|
|
|
<p class="output">Output</p>
|
|
<div>
|
|
{% highlight html %}{% raw %}
|
|
products/my_image.jpg
|
|
products/my_image.jpg
|
|
{% endraw %}{% endhighlight %}
|
|
</div>
|
|
|
|
To return the URL of the image on Shopify's Content Delivery Network (CDN), use the appropriate <a href="/themes/liquid-documentation/filters/url-filters">URL filter</a>.
|
|
|
|
To see a full list of available image sizes, see <a href="/themes/liquid-documentation/filters/url-filters/#size-parameters">image size parameters</a>.
|
|
|
|
Shown below is an example of loading a product image using the <code>product_img_url</code> filter.
|
|
|
|
<p class="input">Input</p>
|
|
<div>
|
|
{% highlight html %}{% raw %}
|
|
{{ image | product_img_url: "medium" }}
|
|
{% endraw %}{% endhighlight %}
|
|
</div>
|
|
|
|
<p class="output">Output</p>
|
|
<div>
|
|
{% highlight html %}{% raw %}
|
|
//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311
|
|
{% endraw %}{% endhighlight %}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|