Is it possible to set image size of assets?

Shopify Partner
115 0 7

Basically, I want to be able to optimize a logo according to viewport width, but I can't find a way to get different image sizes for assets the way you can with product images. I read in some older posts(5+ yrs) that the shopify team was looking into adding this, was that ever done?

Anyone know how this can be accomplished short of manually uploading the the different image sizes yourself?

I've tried both

{{ 'asset_id' | img_url: 'image_size' }}

and

{{ 'asset_id' | asset_url | img_url: 'image_size' }}

 

0 Likes
Shopify Expert
650 0 93

Can you use CSS media queiries to control the size?

0 Likes
Shopify Partner
115 0 7

Yes, to control the size that the image is displayed, but not to control the source size. If I have a 600x200px image and use css to display it as 60x20px the client still has to load the 600x200px image.

That's why product images can be loaded at different sizes. But as far as I can tell there isn't a way to do this with asset images.

0 Likes
Shopify Expert
9779 86 1527

Why not implement responsive image techniques? Browser support maynot be perfect, but the time to start using it is now. Since shopify creates multiple sizes of the image for you, it's easy enough to add each as srcset properties.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
115 0 7

I am using srcset with picturefill polyfill for browsers that don't support it. My question is if I can access multiple sizes of an image that is uploaded as an asset the way you can for product images, because so far I have not found a way to do this.

0 Likes
Shopify Expert
9779 86 1527

My question is if I can access multiple sizes of an image that is uploaded as an asset the way you can for product images, because so far I have not found a way to do this.

Sure. You can always just build in your own resize method to add the size you need to the string.

uploaded asset: some-upload-asset-image.png
change to small: some-upload-asset-image_small.png

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
115 0 7

Is there a reason this was marked as "Outdated"?

Is there a new way to achieve this other than what Jason suggested?

BTW I forgot to say thanks Jason. That helped alot. Thanks.

Here's what I did, in case anyone needs help with this:

{{ 'asset_image_id.jpg' | asset_url | replace: '.jpg', '_large.jpg' }}

 

0 Likes
Shopify Expert
9779 86 1527

Old posts without reply get auto marked as outdated. It doesn't mean the posts are bad - just more of a warning that it could be out of date. 

Just be careful with the method you're using. I've seen clients upload images that are named like some-image.jpg.png. You might want to extend your logic to be a bit more bulletproof.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
115 0 7

Thanks for the info. That makes sense. I guess it would be a bit too much work to mark posts as outdated based on their content.

Just be careful with the method you're using. I've seen clients upload images that are named like some-image.jpg.png. You might want to extend your logic to be a bit more bulletproof.

Shouldn't that be a non-issue since the image input type renames the file to match the id? So if the input's id is "background_image.jpg" the file will be named "background_image.jpg" regardless of the files original name/ext.

0 Likes