Some dev-minded help with lazy load situation

[donrua]

We have a custom module that adds 3 "related posts" at the end of each blog post. The way it's written (and I'm not a dev), it doesn't have a typical "img" tag. Iv'e switched to lazy loading on hundreds of our pages and images, but not for this module. And the module is putting 3 images on every page, so it has a big impact on google scores/redflags, for not being deferred images.

Here is the section of our custom related-posts module, that I think is relevant to the images being used:

<div class="related-item">
<div class="post-inner">
<div class="related-image ">
{% if post.featured_image %}
<div class="related-img" style="background-image:url({{ post.featured_image }});"> </div>
{% endif %}
</div>

Those classes I believe are defined in our master css, and here's the section of that pertaining to .related-posts:


.related-post-section {width: 100%; float: left; padding: 20px 0 80px; }
.related-item { width: calc(100% / 3 - 30px); float: left; margin: 0 15px; box-shadow: 0 0 18px -5px rgba(0, 0, 0, 0.3); background: #F7F8F9; }
.related-post-row { margin: 0 -15px; }
.related-image .related-img {width: 100%; float: left; height: 190px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.related-blog-tags { margin-bottom: 10px; }
.related-contain { width: 100%; float: left; padding: 28px 20px; }
.rel-title {width: 100%; float: left; margin-bottom: 12px; }
.rel-title h2 { font-size: 22px; line-height: 34px; width: 100%; float: left; }
.rel-title h2 a { display: block; }
.rel-content { margin-bottom: 30px; width: 100%; float: left; }
.related-contain .read-more { width: 100%; float: left; }

With those pieces to work with, how might I go about getting those images added via the related posts module, to be lazy loaded?

Is there something I could put in the class .related-image .related-img that would work, or is there more to do?
If I added an LL script like lozad, can I then just add something to the .related-image line to make it all work, or do I need to add something to the module calling on the class?

a sample blog page ,in case needed: https://blog.getadmiral.com/strategies-to-grow-1st-party-data

[Indra]

Oh, @MiaSrebrnjak and I forgot to tell you, since you use height on the .related-image .related-img, you could also change the fixed height to aspect-ratio. Since it has good support by all modern browsers.

[MiaSrebrnjak]

Thank you for your help @Indra, you're a ⭐! 

[Indra]

Hi @MiaSrebrnjak,

If you don't know how to code, you should ask a developer to assist you on this.

But the problem can be solved quite easilly.

You sould replace your html from:

<div class="related-img" style="background-image:url({{ post.featured_image }});"> </div>

To this:

<img class="related-img" loading="lazy" alt="{{ post.featured_image_alt_text }}" src="{{ post.featured_image }}">

But if you want to do this properly, you can also resize the image max width and height so it won't load the full image. Read the documentation about it. So your code will look like this:

<img class="related-img" loading="lazy" alt="{{ post.featured_image_alt_text }}" src="{{ resize_image_url(post.featured_image,0,0,300) }}">

Since the div element is changed to an img element, you sould also add a little css to make the image fill up the space.

Your css need to adjust to this:

.related-image .related-img {
  width: 100%; 
  float: left; 
  height: 190px; 
  object-fit: cover; 
}

[MiaSrebrnjak]

Hi @donrua,

Thank you for reaching out to the Community!

I won't be able to help here myself, but I wanted to tag a couple of subject matter experts to see if they have any input on this matter: 

hi @Oezcan, @Chris-M, @Indra, @miljkovicmisa, do you have any tips for @donrua? Thank you!

Cheers
Mia, Community Team