Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cropped images in srcset using image_tag #1765

Open
alexr8 opened this issue Dec 2, 2023 · 2 comments
Open

Cropped images in srcset using image_tag #1765

alexr8 opened this issue Dec 2, 2023 · 2 comments

Comments

@alexr8
Copy link

alexr8 commented Dec 2, 2023

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
Copy link

+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
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants