Specify a size for a Shopify image asset url. Equivalent to the liquid image size filter: `{{ image | img_url: "medium" }}`

imgURL.js

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'

Hi,

I've recently discovered that too while trying to optimize a theme for mobile devices. However, this is not documented anywhere, so I'd say that it's not really safe to use for theme for instance.

I've emailed Shopify to ask if they cannot add a new parameter to asset_url to specify the size, or officialize this feature so we can use a trick like that.

umm, i am looking at how to vary size for asset image too. How did shopify reply you @bakura10?

This method is nice though.

if you're getting back more than one image and want to resize them all, this was my solution. Returns either an empty object or a modified addOns object.

Use with caution, turns out we modify our shopify response on the server side.

~

const resizeAddons = addonArr => {
  if (!isEmpty(addonArr)) {
    return {
      ...addonArr,
      items: addonArr.items.map(item => {
        return {
          ...item,
          images: item.images.map(image => {
            return {
              ...image,
              src: imgURL(image.src, '120x120'),
            };
          }),
        };
      }),
    };
  } else {
    return {};
  }
};

~

Whilst this is still a working gist, there's now an official package @shopify/theme-images for 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.

Whilst this is still a working gist, there's now an official package @shopify/theme-images for 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!