Using Lazyload for images coming from settings/files

New Member
2 0 0

Hello everyone,

 

I am trying to insert an image which I uploaded on the admin side, using lazyload. I am using what's already in the theme to try to understand how it works however I can't make it work...

 

 

So I tried to adapt this from the brooklyn feature row section:

 

 

<div class="feature-row__image-wrapper" style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
{% assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="feature-row__image lazyload"
src="{{ section.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">
</div>

 

just changed into:

 

 

<div>
{% assign img_url = 'plane1.jpg' | file_img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-sizes="auto"
alt="">
</div>

 

 

I think I could specify manually all the links in data-srcet using {{ 'plane1' | file_img_url: '2048x'}} 2048w , {{ 'plane1' | file_img_url: '1944x'}} 1944w, etc... But I had the impression this would be quite long.

 

Apologies if it doesn't make sense, I want to learn!

 

Many thanks,

 

Henri

0 Likes
Highlighted

hello

try this

https://speedboostr.com/shopify-lazy-loading/

if any issue feel free to reach out

Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
2 0 0

Hi Perennial,

 

Thanks for taking the time to answer.

 

Sorry I got mixed up yesterday and my question was not clear.

 

What I don't understand is the responsive part of the code. In the description of the lazysizes plug-in (https://github.com/aFarkas/lazysizes), the responsive feature seems to be covered with the combination of data-srcset and data-sizes, specifying the different images in data-srcet along with corresponding sizes.

 

In the piece of code taken from the brooklyn theme it seems to be handled with the combination of data-src/data-widths and data-sizes. My understanding issue may come from the fact that I don't understand what this liquid line code does (the "replace" part is unclear to me):

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

and  what is displayed in the data-src="{{img_url}}".

 

I would like to do something similar without using the image coming from the customize interface but from the admin side.

 

Thanks for the link provided the link you provided, there is a great article about optimization.

 

By the way, is it possible to see the liquid code compiled?

 

Many thanks,

 

Henri

0 Likes