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 |
Available sizes
- pico (16x16)
- icon (32x32)
- thumb (50x50)
- small (100x100)
- medium (240x240)
- large (480x480)
- grande (600x600)
- 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_grande.jpg
- uploaded_image eliminate suffix for original image.
