nerdcel/kirby3-responsive-images

Kirby3 plugin to manage responsive images settings using the panel.

v3.1.4 2025-04-02 08:52 UTC

Requires

• php: >= 8.1 < 8.4
• getkirby/composer-installer: ^1.2.1

Requires (Dev)

• getkirby/cms: ^4.2
• phpstan/phpstan: ^1.10
• phpunit/phpunit: ^10
• roave/security-advisories: dev-latest

MIT

• Marcel Hieke

• kirby
• kirby-plugin
• kirby-cms
• getkirby

README

This plugin provides functionality to generate responsive images in your Kirby CMS projects.

Installation

1. Using Composer:

   composer require nerdcel/responsive-images

2. Manually: Download the latest release and copy the contents of the into your site/plugins/responsive-images folder.

Configuration

You can configure the plugin by adding the following options to your config.php file. Consider using the "ready" hook inside the kirby config if you are calling the kirby() function to set the configPath.

'ready' => function ($kirby) {
    return [
        'nerdcel.responsive-images' => [
            'configPath' => kirby()->root('content'),
            'configFile' => 'responsive-img.json',
            'quality' => 75,
            'defaultWidth' => 1024,
            'allowedRoles' => ['admin'],
        ],
    ];
}

If you open the panel now, the plugin should have generated an empty json file with the following content:

{"breakpoints": [], "settings": []}

Usage

Generating Responsive Images To generate a responsive image, use the makeResponsiveImage method:

use Nerdcel\ResponsiveImages\ResponsiveImages;
use Kirby\Cms\File;

$responsiveImages = ResponsiveImages::getInstance();
$imageTag = $responsiveImages->makeResponsiveImage(
    'settings-slug',
    $file, // instance of Kirby\Cms\File
    'custom-classes',
    true, // lazy loading
    'Alt text',
    'webp'
);

echo $imageTag;

But there is also a helper function that you can use to generate responsive images:

echo responsiveImage('settings-slug', $file, 'custom-classes', true, 'Alt text', 'webp');

Focal Point

You can set the focal point(s) of an image for different viewports by adding the following fields to the image file blueprint:

...
fields:
  focalpoints:
    label: Focal Points override
    type: focalpoints

License This plugin is licensed under the MIT License. See the LICENSE file for more details.