Setting srcset values for lazysizes which include crop

Technical Q&A
1

I have a theme which is outputting blog thumbnail images:

{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img
class="lazyload"
src="{{ article.image | img_url:'300x300', crop:'center' }}"
data-src="{{ img_url }}"
data-widths="[180, 300, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-sizes="auto"
alt=""
>

I want the images to be cropped square. The src value produces a cropped image OK, but the values in data-src don’t, they just resize the image to each width and scale the image proportionally.

I’ve tried changing

{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

to

{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_**{width}x{width}**.' -%}

and have tried putting crop:‘center’ in different places but it either doesn’t change the output, or I get an error about the number of parameters.

So how do I go about getting img_url to output square cropped versions of each image at different sizes?

2

@tyssen did you figure out how to achieve this. I tried the exact same thing. but that just causes an error in the filename. I just want a square cropped iamge! :frowning:

3

@aneesh_1 what is the code you’ve tried?

4

I’m having the same issue - it doesnt seem possible to ‘crop’ a square image that is output through a lazysizes srcset loop. E.g. in the following code:

{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

If you change ‘data-aspectratio’ to = 1 (so a square aspect ratio), it has no bearing.

If you add crop: center to the img_url argument, that only outputs a single 1x1 file (i guess because the url structure now changes to have _crop_center at the end so the replace looking for ‘_1x1.’ doesnt work):

{%- assign img_url = article.image | img_url: '1x1', crop: 'center' | replace: '_1x1.', '_{width}x.' -%}

Even if you try and change the replace statement to target ‘1x1’ (to account for the fact that there is now a _crop_center at the end of the url), there doesnt seem to be a way to replace the x1 height declaration. For example this doesnt end up cropping the image:

{%- assign img_url = article.image | img_url: '1x1', crop: 'center' | replace: '_1x1_', '_{width}x_' -%}

And it seems like you cant use {width} twice, as this outputs literally {width} (e.g. 720x{width})

{%- assign img_url = article.image | img_url: '1x1', crop: 'center' | replace: '_1x1_', '_{width}x{width}_' -%}

And there doesn’t seem to be a corresponding {height} to use instead (i guess it maybe generates the {width} variable in lazysizes?).

Any ideas on how to achieve this?