Changing Image Size by URL

Retired Boards Appdev Custom Storefronts
1

The question to anyone that chooses to accept it. Is it possible to use the Shopify API to change the image size by its URL? I found the following information for doing this process using FileStack API and figured that the Shopify community had enough Brainiacs to help me make this happen. Here’s the info I found:

All we’re am going to do is append some simple parameters to the URL. That’s it. No messing around with CSS. No opening up Photoshop. No installing and configuring ImageMagick.

We’ll just take the image URL that we want to transform (e.g. my S3 object url or in this case, Wikipedia Url), add the Filestack transformation API endpoint, an API key and the conversion parameter.

https://cdn.filestackcontent.com/[API-key]/[Conversion-Task]/[external-url]

Let’s start by resizing to a width of 200px and height of 200 px by adding resize=width:200,height:200 to our base url.

Original URL

https://cdn.filestackcontent.com/ARVNFDkIFTCy2nOXvYSoLz/output=secure:true/security=policy:eyJleHBpcnkiOiAxNTYwNTUwMjg1LCAiY2FsbCI6IFsicmVhZCIsICJzdGF0IiwgImNvbnZlcnQiLCAicGljayIsICJzdG9yZSJdfQ==,signature:5c96c569ede1a84d5e7b4f996f9b7083b377f27248032a48c3b6b084336def41/RH0aePntTSa8sjSmSDbZ

URL with Re-Size added

https://cdn.filestackcontent.com/resize=width:200,height:200/ARVNFDkIFTCy2nOXvYSoLz/output=secure:true/security=policy:eyJleHBpcnkiOiAxNTYwNTUwMjg1LCAiY2FsbCI6IFsicmVhZCIsICJzdGF0IiwgImNvbnZlcnQiLCAicGljayIsICJzdG9yZSJdfQ==,signature:5c96c569ede1a84d5e7b4f996f9b7083b377f27248032a48c3b6b084336def41/RH0aePntTSa8sjSmSDbZ

If this is possible can someone please assist me with this as I am new to the world of tech and e-commerce but I learn fast and implement faster.

1 Like
2

It is possible to achieve the same using Shopify’s image filters for Liquid. Have a look here - https://help.shopify.com/en/themes/liquid/filters/url-filters#asset_img_url

3

Hey, that link doesnt seem to work. But in any case, does this then require using Liquid? I myself am using a Vue js store front and just want to format the URLs myself to be able to resize them. How would I achieve this?

4

Going to provide a detailed response in case people find this thread instead of the relevant docs.

It’s possible to achieve outside of Liquid, but the execution depends on your data source. I’m in a similar boat with Vue, but my store is legacy / hybrid, so sometimes my data source is GraphQL and sometimes it’s Liquid. Guessing you’re getting data via API, but i’ll list out both ways for completion sake.

Via Liquid

asset_img_url utilizes img_url under the hood, which inherently changes the path of the url.

image_url appends a dimension=somenumber query param to the url (e.g. https://your-store.myshopify.com/cdn/shop/products/some-product.jpg?v=1252216042**&width=400**). image_url requires you to specify a dimension, so you’ll want to manually replace that if you want another number after the fact.

From my experience with image_url, the size conversion happens on CDN request, so you don’t need to worry about executing it in Liquid first. Given that img_url is deprecated, you can likely safely make those url transformations yourself as well.

Via GraphQL

You can append a transform to the GraphQL query that specifies dimensions (link to Storefront API Image Object and Admin API Image Object).

Both the image_url and the GraphQL APIs for image url creation resolve to the same url and from my understanding utilize the same CDN based API. If you’re like me and want to create dynamic srcsets and sizes on images for responsive imagery without needing to make numerous GraphQL aliases for a single image, you can always just not pass a transform and do something like this in your Vue code, which then defers to the browser to intelligently pull the correct image.

IMPORTANT NOTE: Shopify likely won’t endorse this because it inherently mirrors their API which is obviously subject to change at any given release, possibly changing the url structure or params, so take this advice at your own risk. I truly doubt they’ll make a breaking change like that though.

If anyone wants to copy this code directly, you’ll want to change sizes and srcset accordingly based on your layout. According to the Shopify docs,

Regardless of the specified dimensions, an image can never be resized to be larger than its original dimensions.

which actually makes this approach safe since it will just return the original image when that happens.

There’s quite a bit more in the srcset / sizes realm that I won’t post here (e.g. pixel density, units, etc) :sweat_smile:

example of sizes:

`
	(min-width: 1268px) 364px,
	(min-width: 880px) 30vw,
	(min-width: 48em) calc(100vw - 64px),
	calc(50vw - 40px)
`
1 Like