Arguably one of the most important aspects of any Shopify store is the product photography. Having the best images you can for your product is a great way to market a product. That's why it's really exciting that Shopify has added new options for the img_url filter!
The img_url Filter
For a little background the img_url (and all it's variants) is a liquid filter that returns the url of the image. There are img_urls available on a number of Shopify objects such as product, variant, line item, collection, article, and image. For more detailed image you can check out the Shopify Docs
Below is an example of how you might use the product image url to create a link using liquid templating.
This would create a link something like this:
Up until now, Shopify has only offered a specific set of sizes available for use with the img_url filter. These were:
| name | size |
|---|---|
| pico | 16 x 16 |
| icon | 32 x 32 |
| thumb | 50 x 50 |
| small | 100 x 100 |
| compact | 160 x 160 |
| medium | 240 x 240 |
| large | 480 x 480 |
| grande | 600 x 600 |
| 1024x1024 | 1024 x 1024 |
| 2048x2048 | 2048 x 2048 |
| master | largest image |
This is quite a few options, but especially when selecting from the larger options, there's a good chance the actual product photos you have don't conform to these sizings
New Parameters
Recently Shopify added new parameters and options to the img_url. More specifically to the product_img_url, collection_img_url, and the article_img_url.
These new parameters are:
- Size
- Crop
- Scale
- Format
The Size Parameter
Technically size was already available, but now you can choose any size you'd like by setting the exact pixel value. The syntax looks like this:
The pixel format is width x height. It's also possible to set only the width by '750x' or set only the height by 'x750'. If only one dimension is chosen Shopify calculates the other to maintain the correct aspect ratio of the photo.
One thing to note, is that if you do specify both dimensions like '750x750' and the photo is not equal on both sides Shopify will make a calculation to maintain the aspect ratio.
The Crop Parameter
the crop parameter is a completely new option that Shopify has provided. If you do want your rectangle to fit into the square dimensions your provided you now have a way!
By adding the crop parameter, it informs Shopify that you do in fact want it to modify the image to the specified dimensions. You also let Shopify know how to crop with the following 3 options:
- top
- center
- bottom
The code would look something like this:
The Scale Parameter
Shopify also allows you to alter the pixel density with the scale. This parameter takes one of two options, either 2 or 3
The code will look like this
The Format Parameter
The format parameter allows you to change the format of the image. There are 3 possible converstions:
| From | To |
|---|---|
| PNG | JPG |
| PNG | PJPG |
| JPG | PJPG |
If you're wondering what the P in PJPG stands for, it is Progressive. This means that instead of loading a large image from top to bottom, it loads a grainy version of the whole image and progressively increases in quality.
Conclusion
All of these new parameters make dealing with your Shopify images all that much easier. Yay Shopify!!
