This plugin replaces the default Kirbytag (image: ...)
and adds srcset
, data-srcset
and class="responsively-lazy"
to the resulting <img>
. It will look similar to this example:
<img class="responsively-lazy"
sizes="100vw"
src="1080x720.jpg"
data-srcset="
360x270.jpg 360w,
640x480.jpg 640w,
960x640.jpg 960w,
1080x720.jpg 1080w"
srcset="data:image/gif;1x1px-transparent"
alt="red, green, blue"
/>
Download the files and place them inside /site/plugins/ll-kirbytag-image
.
The image widths can also be specified in your site/config/config.php
:
return [
'll-kirbytag-image' => [
320,
640,
960,
1080
]
];
This plugin is supposed to be used with the responsively-lazy script by Ivo Petkov. You have to download and add it to your website.
To use this plugin with another script for lazyloading or with WebP or whatever, you will have to change at least the $newTag
at the end of the index.php
file to fit your needs.
$newTag = str_replace('<img', '<img class="responsively-lazy" sizes="100vw" data-srcset="' . implode(', ', $srcset) . '"' . 'srcset="data:image/gif;1x1px-transparent"', $newTag);
Free to use under the MIT License.
- kirby-responsiveimage by Pascal Küsgen
- k3-image-tag by Roman Steiner