mirror of
https://github.com/Shopify/liquid.git
synced 2026-09-17 01:40:42 -07:00
moved everything to root folder
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
---
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user