Setting srcset values for lazysizes which include crop

Highlighted
New Member
1 0 0

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?

 

0 Likes