resizeImage

resizeImage is a JavaScript equivalent of Shopify's Liquid | img_url filter. It takes a Shopify CDN image URL and returns a new URL pointing at a resized (and optionally cropped/scaled) version of that image.

It accepts a single options object:

Property	Type	Default	Description
src	string	—	The Shopify CDN URL of the image.
size	string	—	The size you want, e.g. '300x300'. Pass 'master' for the original.
crop	string \| null	null	Optional crop position, e.g. 'center', 'top', 'bottom'.
scale	number \| null	null	Optional pixel density, e.g. 2 for a @2x image.

note

If size is not passed, the original src is returned unchanged. If the src doesn't look like a valid image URL, null is returned.

Usage examples

Basic

2.0 Build

const url = window.BAO.utils.resizeImage({
  src: 'https://cdn.shopify.com/s/files/1/0000/0000/products/shirt.jpg',
  size: '300x300',
})
// https://cdn.shopify.com/s/files/1/0000/0000/products/shirt_300x300.jpg

1.0 Build

const url = resizeImage({
  src: 'https://cdn.shopify.com/s/files/1/0000/0000/products/shirt.jpg',
  size: '300x300',
})
// https://cdn.shopify.com/s/files/1/0000/0000/products/shirt_300x300.jpg

With crop and scale

2.0 Build

const url = window.BAO.utils.resizeImage({
  src: 'https://cdn.shopify.com/s/files/1/0000/0000/products/shirt.jpg',
  size: '600x600',
  crop: 'center',
  scale: 2,
})
// .../shirt_600x600_crop_center@2x.jpg

1.0 Build

const url = resizeImage({
  src: 'https://cdn.shopify.com/s/files/1/0000/0000/products/shirt.jpg',
  size: '600x600',
  crop: 'center',
  scale: 2,
})
// .../shirt_600x600_crop_center@2x.jpg