Changing Image Size by URL

Medicale-Comm
Visitor
1 0 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. 

Replies 3 (3)

Visely-Team
Shopify Partner
1843 210 488

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

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
ToddPadwick
Visitor
1 0 0

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? 

koleary
Visitor
2 0 1

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) 😅

 

 

<img
  ...
  :src="`${imageURL}&width=${imageWidth}`"
  :srcset="`
    ${imageURL}&width=150 150w,
    ${imageURL}&width=300 300w,
    ${imageURL}&width=600 600w,
    ${imageURL}&width=900 900w,
    ${imageURL}&width=1200 1200w,
    ${imageURL}&width=1500 1500w,
    ${imageURL}&width=1800 1800w,
    ${imageURL}&width=2100 2100w,
    ${imageURL}&width=2400 2400w,
    ${imageURL}&width=2700 2700w,
    ${imageURL}&width=3000 3000w,
    ${imageURL}&width=3300 3300w,
    ${imageURL}&width=3600 3600w
  `"
  :width="imageWidth"
  :sizes="sizes"
/>

 

 

example of sizes:

 

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