Product img url

From Shopify Wiki

Syntax:

product_img_url(url, style = 'small')

This filter takes an url with a product's picture filename and returns the full path of it. It takes an optional second parameter to set its size and returns the url of the small sized version of the image by default.

Contents 1 Available sizes 2 Resizing 3 Example 4 Using thumbnails in textile textareas

Available sizes

• pico (16x16)
• icon (32x32)
• thumb (50x50)
• small (100x100)
• medium (240x240)
• large (480x480)
• original - No resizing, but MAX size is 1024x1024.

Resizing

Note: The values in brackets specify the _maximum_ bounds of that image size. It does not mean that the picture of the resulting url will have that exact size since all pictures in Shopify keep their aspect ratio. So it might be that a medium picture has a width of 240px but only a height of 190px and likewise a height of 240px but only a width of 80px.

Example

The following example displays a product's featured image in the size of a thumbnail and also sets a link to that product's detail page.

<a href="{{product.url}}"><img src="{{ product.featured_image | product_img_url: 'thumb' }}" /></a>

Using thumbnails in textile textareas

To post links to images from the admin section, using textile you simply append the size to the end like so:

• uploaded_image_pico.jpg
• uploaded_image_icon.jpg
• uploaded_image_thumb.jpg
• uploaded_image_small.jpg
• uploaded_image_medium.jpg
• uploaded_image_large.jpg
• uploaded_image_original.jpg