srcset and removing cdn sizes

New Member
3 0 0

I'm trying to make some tweaks to a collection level page but it seems nothing I'm doing is having an impact on image sizing generated by the CDN. 

 

For reference, the page I'm working on is https://cuttingedgeknives.myshopify.com/collections/masakage and the horizontal cutout knives are what I'm looking to tweak. 

 

I'm using uncomplicated categories to render out this layout and the snippet within the template is just using 

 

<img
                        src="{{ 'no-image-for-this-collection.png' | asset_url }}"
                        alt="subcategory" class="subcat-grid-link__image-img"
                    />

The trouble I'm having is that the CDN is taking this and rendering out an image that's limited to 480x480 and I want to stop that because the images need to be much bigger. I've no idea where to set this size. 

 

I'd also like to replace that single image tag with srcset but I'm new to liquid and there doesn't seem to be any docs I can find that would allow me to change that image from the collection page into a srcset. 

 

For reference, the image sizing/code I'd like to replicate is on my current site at https://cuttingedgeknives.co.uk/en/brands/masakage/

 

Any pointers much appreciated. I tried speaking to support but they didn't really offer much help. 

 

Cheers

0 Likes
Excursionist
46 8 18

Please try the following methods
https://help.shopify.com/en/themes/liquid/filters/url-filters#asset_img_url
https://help.shopify.com/en/themes/liquid/filters/url-filters#size-parameters

- Feel free to contact me at waqas4346@gmail.com
- Was my reply helpful? Click Like and Accept as Solution
1 Like
New Member
3 0 0

Thanks, I've already tried them and nothing is working. 

 

Currently my theme liquid file has: 

 

<img
                        src="{{ collection.image | asset_img_url: '800x' }}"
                        alt="subcategory" class="subcat-grid-link__image-img lazyload"
                    />

 

However, when I render out the collection page using this (the 800x sizing), it still has the url to the image created by the CDN here https://cdn.shopify.com/s/files/1/0020/2853/5874/collections/gallery-masakage-yuki-santoku-1_480x480... which has the 480x480 setting. The image rendered seems to be cached with the 480x480 sizing even if I change the image in the collection page.

 

I'm using the collections uncomplicated app for this page to create the sub collections and the developer of that told me to speak to Shopify as the CDN is theirs, Shopify then told me to speak to the Theme developer who told me that app wasn't theirs and to speak to Shopify so I've been literally sent around in a loop for what seems like it should be a simple piece of templating functionality. 

 

It's extremely frustrating to say the least :( 

0 Likes
Excursionist
15 2 1

If you want to use original image size, change the code look like this

<img
                        src="{{ collection.image | asset_img_url: 'master' }}"
                        alt="subcategory" class="subcat-grid-link__image-img lazyload"
                    />
0 Likes
Explorer
83 11 11

Hi,
I would suggest to use srcset because it is allowing the browser to select the appropriate image source.

Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
0 Likes