Responsive Images Plugin

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:

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

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.