Last active
October 10, 2021 16:31
-
-
Save DanWebb/cce6ab34dd521fcac6ba to your computer and use it in GitHub Desktop.
Specify a size for a Shopify image asset url. Equivalent to the liquid image size filter: `{{ image | img_url: "medium" }}`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| String.prototype.imgURL = function(size) { | |
| // remove any current image size then add the new image size | |
| return this | |
| .replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.') | |
| .replace(/\.jpg|\.png|\.gif|\.jpeg/g, function(match) { | |
| return '_'+size+match; | |
| }) | |
| ; | |
| }; | |
| // example | |
| '//cdn.shopify.com/s/files/1/0087/0462/products/shirt14.jpeg?v=1309278311'.imgURL('medium'); | |
| // outputs | |
| '//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311' | |
| // alternatively, if you don't want to use a polyfil | |
| function imgURL(src, size) { | |
| // remove any current image size then add the new image size | |
| return src | |
| .replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.') | |
| .replace(/\.jpg|\.png|\.gif|\.jpeg/g, function(match) { | |
| return '_'+size+match; | |
| }) | |
| ; | |
| } | |
| // example | |
| imgURL('//cdn.shopify.com/s/files/1/0087/0462/products/shirt14.jpeg?v=1309278311', 'medium'); | |
| // outputs | |
| '//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311' |
Whilst this is still a working gist, there's now an official package
@shopify/theme-imagesfor that:import { getSizedImageUrl } from '@shopify/theme-images'; // example getSizedImageUrl('//cdn.shopify.com/s/files/1/0087/0462/products/shirt14.jpeg?v=1309278311', 'medium'); // outputs → '//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311'Also note, unlike the gist, it doesn't replace size if there's one specified already.
nice. thank you!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Whilst this is still a working gist, there's now an official package
@shopify/theme-imagesfor that:Also note, unlike the gist, it doesn't replace size if there's one specified already.