Grav: Lazyload images

[julienchazal]

Hello

I'm currently implementing image lazyloading with lazysizes

Image attributes src must be replaced with data-src, and srcset with data-srcset

How can i achieve this with this twig rendering code please ?

{{ services_image.html('', 'alt text', 'services__image lazyload') }}

[rhukster]

you will probably need to create a plugin that implements a Twig filter or function. Have a look at some of the other plugins available in the Grav downloads section that are similar in function.

[julienchazal]

Thx for your answer but i'm just a frontend dev ;)
If anybody is interested by creating this plugin it would be great !

[Perlkonig]

I'll take a look at lazysizes and see what I can do.

[Perlkonig]

Can you explain more what you need? It looks like all you have to do is load the JS and use raw IMG tags instead of markdown. If you want to do this theme wide, just add the JS in the base partial. I can write a plugin that would load the JS on a page by page basis, but the best way to use this would still be to use raw IMG tags instead of markdown.

To do a twig extension would require knowing more what you're trying to accomplish.

[julienchazal]

@Perlkonig yes it would be possible with simple images, but i need to change attributes names on responsive images that's why i'm using Grav derivatives and sizes built-in methods.
Sorry i forgot to mention this :

{% set services_image = page.media.images|first.derivatives(640, 1024, 200).sizes('(min-width:1024px) 1024px, 100vw').cropZoom(1024,170) %}

[rhukster]

With the improvements to derivatives, it might be possible to create a plugin that takes the output generated by Grav's derivatives, and with regex, reformat it into the appropriate lazyload format.

I say this is probably the best approach because the derivatives are already generating the images, and really all you need is a slightly tweaked output.

[rhukster]

Here's the PR that was just merged: https://github.com/getgrav/grav/pull/1107

[Perlkonig]

Having no experience with images derivatives, not sure how much I can help. I'll take a look at least.

[julienchazal]

Maybe the great @fredrikekelund could take a look at it ? ;)

[fredrikekelund]

You really don't need a plugin for this, just mark up your image with normal HTML, and manually set the data-src and data-srcset attributes. So basically:

{% set services_image = page.media.images|first.derivatives(640, 1024, 200).sizes('(min-width:1024px) 1024px, 100vw').cropZoom(1024,170) %}

<img class="lazyload" data-src="{{ service_image.url(false) }}" data-srcset="{{ service_image.srcset(false) }}">

[julienchazal]

Once again @fredrikekelund killed it ;)
Thanks a lot, simple and great solution !

[rhukster]

Good solution 👍

[fredrikekelund]

@julienchazal no worries!

[ganar]

@fredrikekelund tiny correction to your awesome code

````
{% set service_image = page.media.images|first.derivatives(640, 1024, 200).sizes('(min-width:1024px) 1024px, 100vw').cropZoom(1024,170) %}

````

You set services_image, but used service_image below

[akolbo]

Here's my solution. Credit to Ricardo from the Grav Discord chat for the help. Instead of making Grav add its srcset images into the data-srcset attribute, change the Lazysizes Javascript so that it utilizes srcset instead. I'm also using the Lazysizes Blur Up plugin along with it:

Twig/HTML/CSS:

{% set image_sm = page.media['photo_sm.jpg'].cropResize(320,320).gaussianBlur(5) %}
{% set image = page.media['photo.jpg'].cropResize(1980,720).derivatives(300, 1980, 200) %}

<style>
        .mediabox {
            position: relative;
            display: block;
            height: 0;
            width: 100%;
            padding-bottom: 66.6667%;
        }

        .mediabox-img.ls-blur-up-is-loading,
        .mediabox-img.lazyload:not([src]) {
            visibility: hidden;
        }

        .ls-blur-up-img,
        .mediabox-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;

            /* only if you want to change the blur-up option from always to auto or want to use blur up effect without a lowsrc image. */
            /*font-family: "blur-up: auto", "object-fit: cover";*/

            object-fit: cover;
        }

        .ls-blur-up-img {
            filter: blur(10px);
            opacity: 1;
            transition: opacity 4000ms, filter 4500ms;
        }

        .ls-blur-up-img.ls-inview.ls-original-loaded {
            opacity: 0;
            filter: blur(20px);
        }

    </style>

<div class="wrapper">
    <div class="mediabox">            
        <img
            class="mediabox-img lazyload"
            srcset="{{ image.srcset(false) }}"                
            data-sizes="auto"
            data-lowsrc="{{ image_sm.url(false) }}"
        />
    </div>
</div>

Load the JS in the Head:

{% do assets.addInlineJs("window.lazySizesConfig = window.lazySizesConfig || {};
lazySizesConfig.srcAttr = 'src';
lazySizesConfig.srcsetAttr = 'srcset';", 100) %}
{% do assets.addInlineJs("window.lazySizesConfig.init = false;", 99) %}

            {% do assets.addJs('lazysizes', 98) %}            
            {% do assets.addJs('ls-blur-up', 97) %}                        

{% do assets.addInlineJs("lazysizes.cfg.blurupMode = 'always';", 94) %}                                    
{% do assets.addInlineJs("lazySizes.init();", 93) %}