1.4.1

Notable Changes

• Add version number to composer.json for Kirby 3.6

1.4.0

Notable Changes

• Feature: Generate placeholders for cropped images

Usage With Cropped Images

Kirby doesn't support file methods on cropped files/images, because the latter inherit the Kirby\Cms\FileVersion class.

Pass the ratio of a cropped image to the placeholder method to generate a cropped preview:

<?php $cropped = $original->crop(500, 400) ?>
<img
  src="<?= $original->placeholderUri(5/4) ?>"
  data-src="<?= $cropped->url() ?>"
  data-lazyload
  alt="<?= $original->alt() ?>"
/>

1.3.0

Notable Changes

• Refactor project setup and remove autoloader
• Replace useLazyloading hook with drop-in replacement Loadeer.js
• Add example image block
• Breaking: Changed options for the Kirbytag – take a look into the options for the new configuration keys

New Lazy Loading Library for the Frontend

ℹ️ Since v1.3.0, the lazy loading hook provided by this plugin has been replaced by Loadeer.js – a rewritten version of the former hook. Everything will work just like before.

I now strongly recommend 🦌 Loadeer.js. In a nutshell, it's a tiny, performant, SEO-friendly lazy loading library and can be used with or without a build step if you don't have a frontend asset build chain.

Without Build Step & Auto Initialization

Simply load it from a CDN:

<script src="https://unpkg.com/loadeer" defer init></script>

• The defer attribute makes the script execute after HTML content is parsed.
• The init attribute tells Loadeer.js to automatically initialize and watch all elements that have a data-lazyload attribute.

Import As ES Module

You can use the ES module build by installing the loadeer npm package:

import Loadeer from "loadeer";

const instance = new Loadeer();
loadeer.observe();

1.2.1

Notable changes

• Respect data-sizes values other than auto

1.2.0

Notable Changes

• The sizes attribute is now automatically updated on window resize if the element has data-sizes="auto" set

To use the feature, include the latest useLazyload.js into your project.

1.1.4

Notable changes

• Remove social preview Illustrator from repository.

1.1.3

Notable changes

• Remove PHPStan
• Remove PHP CS Fixer

… since the bloated up the plugin setup.

1.1.2

Notable changes

• Upgrade dependencies

1.1.1

Notable changes

• Increase PHP version support: now 7.3+ (instead of 7.4+ before)

1.1.0 — Srcset Support

Using srcset with Kirbytags

This release adds support for using responsive images with the (blurryimage: …) Kirbytag. To enable it, set the following option in your config.php to true:

<?php
// site/config/config.php
return [
    // …
    'kirby-extended.blurry-placeholder' => [
        'srcset' => [
            'enable' => true,
            'preset' => 'text'
        ]
    ]
]

For further options, head over to the README.

Automatically setting the sizes attribute

The included useLazyload.js supports setting the sizes attribute automatically, corresponding to the current size of your image. For this to work, the data-sizes attribute has to be set to auto. If you have srcset's enabled in your configuration, this is already done for you when using the (blurryimage: …) Kirbytag.