PHPackages                             nerdcel/kirby3-responsive-images - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. nerdcel/kirby3-responsive-images

ActiveKirby-plugin[Image & Media](/categories/media)

nerdcel/kirby3-responsive-images
================================

Kirby3 plugin to manage responsive images settings using the panel.

v3.4.1(4mo ago)92.1k2MITPHPPHP >= 8.1 < 8.5

Since Jan 25Pushed 4mo ago2 watchersCompare

[ Source](https://github.com/nerdcel/kirby3-responsive-images)[ Packagist](https://packagist.org/packages/nerdcel/kirby3-responsive-images)[ Docs](https://github.com/nerdcel/kirby3-responsive-images)[ RSS](/packages/nerdcel-kirby3-responsive-images/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (8)Dependencies (5)Versions (42)Used By (0)

Responsive Images Plugin
========================

[](#responsive-images-plugin)

[![GitHub release](https://camo.githubusercontent.com/e5db20f97f270cfbb0478b3c011ae5533192112240a0fb8e60afafafc48cb614/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6e65726463656c2f6b69726279332d726573706f6e736976652d696d616765732e737667)](https://camo.githubusercontent.com/e5db20f97f270cfbb0478b3c011ae5533192112240a0fb8e60afafafc48cb614/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6e65726463656c2f6b69726279332d726573706f6e736976652d696d616765732e737667)[![License](https://camo.githubusercontent.com/83e516e87a9474a6914fe229cd610a00670e0072cc405bb290065fb9e6a8bb98/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6e65726463656c2f6b69726279332d726573706f6e736976652d696d616765732e737667)](https://camo.githubusercontent.com/83e516e87a9474a6914fe229cd610a00670e0072cc405bb290065fb9e6a8bb98/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6e65726463656c2f6b69726279332d726573706f6e736976652d696d616765732e737667)[![Kirby 4+](https://camo.githubusercontent.com/016d1888f4bf7c902d7fa3ca9aff34cd3d62cebf4840b0534eb01c27f3c4b93c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4b697262792d342532422d303061326564)](https://camo.githubusercontent.com/016d1888f4bf7c902d7fa3ca9aff34cd3d62cebf4840b0534eb01c27f3c4b93c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4b697262792d342532422d303061326564)

[![Responsive Images Plugin](docs/panel.png)](docs/panel.png)

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

Installation
------------

[](#installation)

1. **Using Composer**: ```
    composer require nerdcel/kirby3-responsive-images
    ```
2. **Manually**: Download the [latest release](https://github.com/nerdcel/kirby3-responsive-images/releases/latest)and copy the contents of the into your `site/plugins/responsive-images` folder.

Configuration
-------------

[](#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
-----

[](#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
-----------

[](#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
```

[![Focal points](docs/focalpoint-default.png)](docs/focalpoint-default.png)

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

###  Health Score

51

—

FairBetter than 96% of packages

Maintenance76

Regular maintenance activity

Popularity26

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity75

Established project with proven stability

 Bus Factor1

Top contributor holds 97.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~28 days

Recently: every ~17 days

Total

39

Last Release

131d ago

Major Versions

1.2.1 → 2.0.02023-11-15

2.1.0-alpha-1 → 3.0.0-alpha.02024-12-04

2.1.1 → 3.0.0-alpha.22024-12-18

2.1.2 → 3.0.0-alpha.4.12025-01-16

PHP version history (3 changes)1.0.1PHP >= 8.0 < 8.2

2.1.0PHP >= 8.1 < 8.4

v3.4.0PHP >= 8.1 < 8.5

### Community

Maintainers

![](https://www.gravatar.com/avatar/62cdaab427d91cc19875dc8a62e4bee3ff640b236ca5cde2ec4ca7f65fac0148?d=identicon)[nerdcel](/maintainers/nerdcel)

---

Top Contributors

[![nerdcel](https://avatars.githubusercontent.com/u/3840331?v=4)](https://github.com/nerdcel "nerdcel (78 commits)")[![JarekYaro](https://avatars.githubusercontent.com/u/53605886?v=4)](https://github.com/JarekYaro "JarekYaro (2 commits)")

---

Tags

image-processingkirby-cmskirby-pluginkirby4kirby5responsive-imageskirbykirby-pluginkirby-cmsgetkirby

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/nerdcel-kirby3-responsive-images/health.svg)

```
[![Health](https://phpackages.com/badges/nerdcel-kirby3-responsive-images/health.svg)](https://phpackages.com/packages/nerdcel-kirby3-responsive-images)
```

###  Alternatives

[timnarr/kirby-imagex

Modern images for Kirby CMS – This plugin helps you orchestrate modern, responsive and performant images in Kirby

797.5k1](/packages/timnarr-kirby-imagex)[bnomei/kirby3-janitor

Kirby Plugin for running commands like cleaning the cache from within the Panel, PHP code or a cronjob

9339.9k2](/packages/bnomei-kirby3-janitor)[bnomei/kirby3-feed

Generate a Atom/JSON/RSS-Feed and XML-Sitemap from Pages-Collections

7224.8k](/packages/bnomei-kirby3-feed)[belugadigital/kirby-navigation

Kirby 5 field for hierarchical menus with drag & drop level indentation.

8713.4k](/packages/belugadigital-kirby-navigation)[bnomei/kirby3-dotenv

Kirby Plugin for environment variables from .env

4144.1k1](/packages/bnomei-kirby3-dotenv)[bnomei/kirby3-fingerprint

File Method and css/js helper to add cache-busting hash and optional Subresource Integrity to file

4130.5k1](/packages/bnomei-kirby3-fingerprint)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)