search

Shopify / liquid

Liquid markup language. Safe, customer facing template language for flexible web apps.
https://shopify.github.io/liquid/
MIT License
11.02k stars 1.38k forks source link

Cropped images in srcset using image_tag #1765

Open alexr8 opened 9 months ago

alexr8 commented 9 months ago

I'm not sure if this is the right repo to post this bug so do let me know if it should be filed elsewhere.

If you specify a crop for an image with image_url and try and feed that into the image_tag, the generated srcset images always contain your original fixed height. For example:

{{
  media.preview_image
  | image_url: width: 416, height: 416
  | image_tag:
    loading: 'lazy',
    sizes: sizes,
    widths: '54, 74, 104, 162, 208, 324, 416',
    id: thumbnail_id,
    alt: media.alt
  | escape
}}

Each image that gets generated in the srcset will have height of 416 - so 54 x 416, 74 x 416, 104 x 416 and so on.

The images generated should take into account the aspect ratio - 54 x 54, 74 x 74 etc.

Also detailed here by another user: https://community.shopify.com/c/technical-q-a/image-tag-how-do-i-get-cropped-images-into-a-srcset/td-p/1472242.

simonlayfield commented 9 months ago

+1 for this. I expected the same, and ended up having to switch to an HTML img tag for fine tuning responsive image sizes.

ceri-waterscreative commented 3 months ago

+1

jonXmack commented 2 months ago

+1

sebastianlenton commented 1 month ago

Just ran into this too.