Kirby 3 Srcset - lazyloading image srcset element

Plugins Kirby 3 plugin 🧩
, ,
1

I am creating posts for my plugins to make it easier to find them using the forum search and not just the docs search.

site/config/config.php

return [
    'thumbs' => [
        'srcsets' => [
            'default' => [320, 1200],
            'breakpoints' => [576, 768, 992, 1200],
        ],
    ],
];

This plugin extends the core (image: ) -Kirbytag. All params that work for (image: ) can be used with (lazysrcset: ) yielding the same output.

# like image tag
(image: myfile.jpg)
(lazysrcset: myfile.jpg)
(lazysrcset: myfile.jpg link: mypdf.pdf)
(lazysrcset: myfile.jpg class: myclass)

# changing width, height and/or quality of src (not srcset)
(lazysrcset: myfile.jpg width: 640 height: 480 quality: 70)

# different lazy class
(lazysrcset: myfile.jpg lazy: lazy)

# different or no prefix
(lazysrcset: myfile.jpg prefix: )

# remove wrapping figure element
(lazysrcset: myfile.jpg figure: false)

# remove the ratio information
(lazysrcset: myfile.jpg ratio: false)

# sizes from config
(lazysrcset: myfile.jpg sizes: default)
(lazysrcset: myfile.jpg sizes: breakpoints)

# sizes are supported in various formats
# string, number(s), with and without px, comma and brackets
(lazysrcset: myfile.jpg sizes: 320 640 960)
(lazysrcset: myfile.jpg sizes: [320, 640, 960])
(lazysrcset: myfile.jpg sizes: 320px, 640px, 960px)

You can use file methods to generate the lazyloading image element (an <img>).

echo $page->image('ukulele.jpg')->lazysrcset();

// 320 and 1200
echo $page->image('ukulele.jpg')->lazysrcset('default');
 
// 576, 768, 992, 1200
echo $page->image('ukulele.jpg')->lazysrcset('breakpoints');
 
// 320, 640, 960
echo $page->image('ukulele.jpg')->lazysrcset(['sizes' => [320, 640, 960]]);

// other options
echo $page->image('ukulele.jpg')->lazysrcset([
    // lazysrcset
    'sizes' => [320, 640, 960],
    'lazy' => 'lazyloading-with-flickity',
    'prefix' => 'data-flickity-lazyload-',
    'figure' => false,
    'autosizes' => false,
    // image
    'width' => 640,
    'height' => 480,
    // ...
]);