Setting srcset values for lazysizes which include crop

tyssen
Visitor
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?

 

Replies 3 (3)

aneesh
Visitor
1 0 0

@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! 😞

PaulNewton
Shopify Partner
6274 573 1319

@aneesh what is the code you've tried?

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


rizzledizzle
Shopify Partner
2 0 1

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.' -%}
 <img class="lazyload"
   data-src="{{ img_url }}"
   data-widths="[180, 360, 540, 720, 900, 1080]"
   data-aspectratio="{{ article.image.aspect_ratio }}"
   data-sizes="auto"
   alt="{{ article.title | escape }}">

 

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?