PHPackages sigtrygg-space/kirby-image-compare - 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. sigtrygg-space/kirby-image-compare ActiveKirby-plugin[Image & Media](/categories/media) sigtrygg-space/kirby-image-compare ================================== Before/after image comparison block for Kirby CMS: responsive images, draggable divider, zero dependencies. 1.0.1(1mo ago)319MITPHPPHP >=8.2CI passing Since Jul 10Pushed 1mo agoCompare [ Source](https://github.com/sigtrygg-space/kirby-image-compare)[ Packagist](https://packagist.org/packages/sigtrygg-space/kirby-image-compare)[ Docs](https://github.com/sigtrygg-space/kirby-image-compare)[ RSS](/packages/sigtrygg-space-kirby-image-compare/feed)WikiDiscussions main Synced 1w ago READMEChangelog (10)Dependencies (2)Versions (12)Used By (0) Kirby Image Compare =================== [](#kirby-image-compare) A before/after image comparison block for [Kirby CMS](https://getkirby.com) — two images, a draggable divider, done. [![Before/after comparison slider](.github/screenshot.jpg)](.github/screenshot.jpg) - **Zero dependencies, zero config.** ~60 lines of vanilla JS, no slider library. The frontend CSS/JS are injected into the `` of every page that contains the block — nothing to add to your templates. - **Responsive images** out of the box: WebP + JPEG `` with `srcset`, built on Kirby's own thumb engine. - **Accessible:** the handle is a WAI-ARIA slider — mouse, touch, and full keyboard support (arrow keys, PageUp/PageDown, Home/End). - **Themeable** through CSS custom properties. - **Interactive Panel preview:** drag the divider right in the Panel to set the start position — the range field in the block drawer stays in sync. Requirements ------------ [](#requirements) - Kirby 5 - PHP 8.2+ Installation ------------ [](#installation) ### Composer [](#composer) ``` composer require sigtrygg-space/kirby-image-compare ``` ### Download [](#download) Download the latest release and copy the folder to `site/plugins/image-compare`. ### Git submodule [](#git-submodule) ``` git submodule add https://github.com/sigtrygg-space/kirby-image-compare.git site/plugins/image-compare ``` Usage ----- [](#usage) Allow the block type in any `blocks` field: ``` fields: text: type: blocks fieldsets: - heading - text - image-compare ``` Editors then pick a before image, an after image, an optional caption, and the initial divider position (0–100 %, default 50). The Panel preview mirrors the frontend: drag its divider to set the start position, or fine-tune it with the range field in the drawer (double-click the preview to open it). The block renders a `` with both images as responsive `` elements and a draggable divider. The stylesheet and script are injected into the `` automatically whenever a rendered page contains the block — nothing to add to your templates. (Only if you render blocks entirely outside of Kirby's page rendering — e.g. in a custom route without a `` — do you need to include the two files from `kirby()->plugin('sigtrygg-space/kirby-image-compare')->asset('image-compare.css')->url()`and `…->asset('image-compare.js')->url()` yourself.) Options ------- [](#options) Configure site-wide in `site/config/config.php` under the `sigtrygg-space.kirby-image-compare` namespace: ``` 'sigtrygg-space.kirby-image-compare' => [ 'widths' => [480, 768, 1024, 1200, 1440], 'quality' => ['webp' => 90, 'jpg' => 85], 'sizes' => '(min-width: 1200px) 720px, 100vw', ], ``` OptionDefaultPurpose`widths``[480, 768, 1024, 1200, 1440]``srcset` widths`formats``['webp', 'jpg']``` formats in order (`avif`, `webp`, `jpg`, `png`)`quality``88`thumb quality: int, per-format map, or `null` for your Kirby `thumbs` config`sizes``(min-width: 1200px) 720px, 100vw``sizes` attribute (also overridable per call via the snippet variable)`fallback``1200`width of the plain `` fallback`step``2`keyboard step in percent (arrow keys; PageUp/PageDown move 10 %, Home/End jump to the edges)`label``null`overrides the handle's `aria-label` (useful on single-language sites, where the English translation would otherwise win)When setting `label`, use a noun naming what is controlled (e.g. `'Bildvergleich'`) — screen readers announce the slider role themselves, so don't repeat it in the label ("slider for …" would be read twice). Dynamically inserted blocks --------------------------- [](#dynamically-inserted-blocks) The script initializes every `[data-image-compare]` stage once on page load. If your site swaps content in later (htmx, Turbo, infinite scroll), re-run the idempotent initializer on the new fragment: ``` window.kirbyImageCompare.init(fragment); // argument optional, defaults to document ``` Theming ------- [](#theming) Override these custom properties on `.image-compare` or any ancestor: PropertyDefaultPurpose`--image-compare-line-width``2px`divider line width`--image-compare-line-color``#fff`divider line color`--image-compare-handle-size``2rem`diameter of the round grip`--image-compare-handle-bg``#fff`grip background`--image-compare-handle-color``#555`grip arrow color`--image-compare-handle-hover-color`OS accent color\*arrow color on hover and keyboard focus`--image-compare-arrow-size``75%`arrow size relative to the grip\* where the browser supports the `AccentColor` system color keyword (Safari, Firefox); elsewhere the arrows keep their regular color until you set the property. The stage's aspect ratio is derived from the before image automatically (the plugin sets `--image-compare-ratio` as an inline style on the `figure`). To force a different ratio, target the stage itself — a declaration on the stage always beats the inherited inline value: ``` .image-compare-stage { --image-compare-ratio: 16 / 9; } ``` ### Custom image markup [](#custom-image-markup) The responsive `` lives in its own snippet. To replace it (different widths, formats, a lazy-loading library, …), copy `snippets/image-compare-picture.php` to `site/snippets/image-compare-picture.php`and adjust it — site snippets override plugin snippets of the same name. Your markup's `picture`/`img` elements are sized by the plugin CSS regardless of their classes. The same goes for the block markup itself (`snippets/blocks/image-compare.php` → `site/snippets/blocks/image-compare.php`). Development ----------- [](#development) The Panel preview is a Vue single-file component, precompiled with [kirbyup](https://github.com/johannschopplich/kirbyup): ``` npm install npm run build # rebuilds index.js/index.css from src/ ``` The built `index.js`/`index.css` are committed; CI fails when they are stale. License ------- [](#license) [MIT](LICENSE) ### Health Score 43 — FairBetter than 89% of packages Maintenance92 Actively maintained with recent releases Popularity11 Limited adoption so far Community8 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 95.2% 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 ~1 days Total 11 Last Release 39d ago Major Versions 0.7.1 → 1.0.02026-07-11 ### Community Maintainers ![](https://www.gravatar.com/avatar/c3e23c9033fc12cff102b378245751c8c127ba72dc4b8f69ea484b1946661460?d=identicon)[sigtrygg-space](/maintainers/sigtrygg-space) --- Top Contributors [![sigtrygg-space](https://avatars.githubusercontent.com/u/531677?v=4)](https://github.com/sigtrygg-space "sigtrygg-space (20 commits)")[![claude](https://avatars.githubusercontent.com/u/81847?v=4)](https://github.com/claude "claude (1 commits)") --- Tags before-afterimage-comparisonkirbykirby-cmskirby-pluginkirby5kirby5-pluginblockkirbykirby-pluginkirby-cmsimage comparebefore-aftercomparison-slider ### Embed Badge ![Health badge](/badges/sigtrygg-space-kirby-image-compare/health.svg) ``` [![Health](https://phpackages.com/badges/sigtrygg-space-kirby-image-compare/health.svg)](https://phpackages.com/packages/sigtrygg-space-kirby-image-compare) ``` ### Alternatives [getkirby/cms The Kirby core 1.5k606.6k546](/packages/getkirby-cms)[medienbaecker/kirby-modules Easily add modules to your pages 895.6k1](/packages/medienbaecker-kirby-modules)[timnarr/kirby-imagex Modern images for Kirby CMS – This plugin helps you orchestrate modern, responsive and performant images in Kirby 828.9k1](/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 9343.5k2](/packages/bnomei-kirby3-janitor)[bnomei/kirby3-feed Generate a Atom/JSON/RSS-Feed and XML-Sitemap from Pages-Collections 7228.0k](/packages/bnomei-kirby3-feed)[belugadigital/kirby-navigation Kirby 5 field for hierarchical menus with drag & drop level indentation. 8615.1k](/packages/belugadigital-kirby-navigation) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)