Liquid, JavaScript, themes, sales channels
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?
@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! 😞
@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
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024