PHPackages                             macgyer/mg-image-comparison-slider - 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. macgyer/mg-image-comparison-slider

ActiveTypo3-cms-extension[Image & Media](/categories/media)

macgyer/mg-image-comparison-slider
==================================

Slider for showing the difference between two images

1.2.0(1mo ago)024GPL-2.0-or-laterPHPPHP ^8.2

Since Oct 31Pushed 1mo agoCompare

[ Source](https://github.com/MacGyer/mg-image-comparison-slider)[ Packagist](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[ RSS](/packages/macgyer-mg-image-comparison-slider/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (4)Versions (7)Used By (0)

[![TYPO3 13](https://camo.githubusercontent.com/72d1fd53c343c99c072f2cfcba449b7837836a64f8f0374465f9506fa8b595e4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332d6f72616e67652e7376673f7374796c653d666f722d7468652d6261646765)](https://get.typo3.org/version/13)[![TYPO3 14](https://camo.githubusercontent.com/ab83223f932357e31b30bda83cdb3dcccf89bd583010f8f5c5b74e5e0a97fa59/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31342d6f72616e67652e7376673f7374796c653d666f722d7468652d6261646765)](https://get.typo3.org/version/14)[![Latest Stable Version](https://camo.githubusercontent.com/9ca42990aebafbf42e4dbab608387b271dd1419f5bfcc0760b692ebdd1876fdf/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f763f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![Total Downloads](https://camo.githubusercontent.com/a4ed475c1e6925c1d86eafe9c0bb0c2dc47fc6eca961560df7de36f2eb9e8f1b/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f646f776e6c6f6164733f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![License](https://camo.githubusercontent.com/3c4dce2faa829e281c19ee211720bf0c30fbb6775130ed033a72fc08b8300c53/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f6c6963656e73653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![PHP Version Require](https://camo.githubusercontent.com/a357dc87805ab9c40c9eefc2085fbfbc40c3343e20f533131595f2900c49bc64/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f726571756972652f7068703f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![Donate](https://camo.githubusercontent.com/6c77ceb6b90e7f66f006be54740623450b1197f935060be46d7202652a43c773/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d50617950616c2d677265656e2e7376673f7374796c653d666f722d7468652d6261646765)](https://paypal.me/macgyer/5)

Image Comparison Slider
=======================

[](#image-comparison-slider)

A slider showing the difference between two images. Can be used vertical and horizontal. Based on `img-comparison-slider`by [sneas](https://img-comparison-slider.sneas.io/).

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

[](#installation)

The preferred way of installation is through Composer. If you don't have Composer you can get it here:

To install the package add the following to the `require` section of your composer.json:

```
"require": {
    "macgyer/mg-image-comparison-slider": "^1.0"
}
```

Include the Site Set, either in your site configuration or as a dependency of another Set:

```
# config/sites//config.yaml
dependencies:
  - macgyer/mg-image-comparison-slider
```

### Without Site Sets

[](#without-site-sets)

If your setup does not use Site Sets, import the TypoScript manually in your sitepackage:

```
@import 'EXT:mg_image_comparison_slider/Configuration/TypoScript/setup.typoscript'

```

Global default colors for handle and divider require the Site Set. Without it, colors can be configured individually per content element.

Changelog
---------

[](#changelog)

### 1.2.0 - 2026-05-10

[](#120---2026-05-10)

- \[NEW\]: add TYPO3 14 compatibility
- \[FIX\]: scope inline CSS to element ID to prevent color overrides when multiple sliders appear on the same page
- \[FIX\]: restore Appearance tab in backend form by basing CE type on `types['header']` instead of `types[1]`
- \[FIX\]: place Slider tab as second tab directly after General

### 1.1.1 - 2026-02-01

[](#111---2026-02-01)

- \[NEW\]: update JS library to [8.0.7](https://www.npmjs.com/package/img-comparison-slider/v/8.0.7) which uses Constructable Stylesheets for Shadow DOM to avoid issues with nonce attribute when CSP is enabled

### 1.1.0 - 2025-11-22

[](#110---2025-11-22)

- \[FIX\]: render images with `` instead of partial
- \[NEW\]: add settings for handle and divider

### 1.0.1 - 2025-10-31

[](#101---2025-10-31)

- \[TASK\]: cleanup unnecessary CSS rules
- \[TASK\]: fix README URLs

### 1.0.0 - 2025-10-31

[](#100---2025-10-31)

- initial release

---

URL**Repository:****TER:**[https://extensions.typo3.org/extension/mg\_image\_comparison\_slider](https://extensions.typo3.org/extension/mg_image_comparison_slider)

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance89

Actively maintained with recent releases

Popularity6

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

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 ~48 days

Total

5

Last Release

55d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/78f83100a0024086e9dcecb006456faedf561f296fbc0b6a86b6eb1f052e46c0?d=identicon)[macgyer](/maintainers/macgyer)

### Embed Badge

![Health badge](/badges/macgyer-mg-image-comparison-slider/health.svg)

```
[![Health](https://phpackages.com/badges/macgyer-mg-image-comparison-slider/health.svg)](https://phpackages.com/packages/macgyer-mg-image-comparison-slider)
```

###  Alternatives

[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

611.1M8](/packages/netresearch-rte-ckeditor-image)[typo3/cms-styleguide

TYPO3 extension to showcase TYPO3 Backend capabilities

106760.3k33](/packages/typo3-cms-styleguide)[plan2net/webp

Drop-in WebP, AVIF, and JPEG XL delivery for TYPO3 images — automatic, no URL or template changes

681.5M5](/packages/plan2net-webp)[friendsoftypo3/content-blocks

TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML

103519.9k53](/packages/friendsoftypo3-content-blocks)[7elix/styleguide

TYPO3 extension to showcase TYPO3 Backend capabilities

10727.3k](/packages/7elix-styleguide)[blueways/bw-focuspoint-images

Image Editor for adding focus points to images

12112.7k2](/packages/blueways-bw-focuspoint-images)

PHPackages © 2026

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