PHPackages                             frontend-services/craft-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. frontend-services/craft-compare

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

frontend-services/craft-compare
===============================

Before/after image comparison slider field for Craft CMS

1.0.0(3mo ago)00proprietaryJavaScript

Since Apr 2Pushed 3mo agoCompare

[ Source](https://github.com/frontend-services/craft-compare)[ Packagist](https://packagist.org/packages/frontend-services/craft-compare)[ RSS](/packages/frontend-services-craft-compare/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

Compare — Craft CMS Plugin
==========================

[](#compare--craft-cms-plugin)

Before/after image comparison slider field for Craft CMS 5. Editors pick two assets and configure a draggable divider. It also includes a custom web component for rendering the comparison on the frontend out of the box, with support for responsive images, retina displays, and lazy loading.

---

Requirements
------------

[](#requirements)

- Craft CMS 5.0+
- PHP 8.1+

---

Field Setup
-----------

[](#field-setup)

Add a **Compare** field to any field layout. The field settings let you configure:

SettingDescription**Allowed Volumes**Restrict which asset volumes editors can pick from. Leave empty to allow all.**Default Start Position**Initial divider position (0–100). Default: `50`.**Default Moving Delay (ms)**Drag smoothing in milliseconds (0 = instant). Default: `0`.**Default Initial Animation**Animate the divider when it first enters the viewport. Default: off.**Default Animation Distance (%)**How far (0–50%) the divider swings during the intro animation. Default: `10`.---

Twig Usage
----------

[](#twig-usage)

### `entry.myField.render()`

[](#entrymyfieldrender)

The simplest way to output the comparison component:

```
{{ entry.compareField.render() }}
```

Pass a `config` array to control image transforms and other options:

```
{{ entry.compareField.render({
    transforms: {
        0:  { width: 600, height: 384, mode: 'crop', quality: 85 },
        768: { width: 768, height: 512, mode: 'crop', quality: 85 },
        1200: { width: 1200, height: 800, mode: 'crop', quality: 85 },
    },
    retina: true,
    lazy: true,
    class: 'my-compare',
    id: 'hero-compare',
}) }}
```

#### Config options

[](#config-options)

KeyTypeDefaultDescription`transforms``array``{}`Breakpoint → transform map. Keys are min-width values in px; Craft image transforms as values. Generates ``/`` elements.`retina``bool``true`When `true`, doubles transform dimensions for a `2x` srcset descriptor.`lazy``bool``true`Adds `loading="lazy"` to `` elements.`class``string``''`CSS class added to the `` element.`id``string``''``id` attribute added to the `` element.### Manual output

[](#manual-output)

Access the raw data model to build your own markup:

```
{% set compare = entry.compareField %}

{% if compare %}

{% endif %}
```

#### Available properties

[](#available-properties)

PropertyTypeDescription`before``Asset|null`The "before" asset element.`after``Asset|null`The "after" asset element.`divider``Asset|null`The divider asset element (nullable).`beforeUrl``string`URL of the before asset.`afterUrl``string`URL of the after asset.`startPosition``int`Divider position (0–100).`movingDelay``int`Drag smoothing in ms.`initialAnimation``bool`Whether the intro animation is enabled.`initialAnimationDistance``int`Intro animation swing distance (0–50).---

`` Web Component
-------------------------------

[](#craft-compare-web-component)

The frontend relies on the `` custom element, automatically registered when using `render()` or when the `CompareFieldAsset` is registered in the CP.

### Attributes

[](#attributes)

AttributeTypeDefaultDescription`position``number``50`Initial divider position as a percentage (0–100).`delay``number``0`Drag smoothing delay in milliseconds.`animate``boolean` (presence)—Enables the viewport-entry animation.`animate-distance``number``10`Swing distance for the intro animation (0–50).### Slots

[](#slots)

SlotDescription`before```, ``, or `` for the "before" state.`after```, ``, or `` for the "after" state.`divider`Optional element used as the drag handle (SVG `` or ``).---

GraphQL
-------

[](#graphql)

The field exposes a `CompareFieldData` type with the following fields:

```
query {
    entries(section: "blog") {
        ... on blog_default_Entry {
            compareField {
                startPosition
                movingDelay
                initialAnimation
                initialAnimationDistance
                beforeUrl
                afterUrl
                dividerUrl
                before { id url title }
                after  { id url title }
                divider { id url title }
            }
        }
    }
}
```

###  Health Score

32

—

LowBetter than 69% of packages

Maintenance82

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity34

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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

Unknown

Total

1

Last Release

91d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e347987513af1c082a53b0db0113f75d01856118b08fc955dd7ff188eef34a05?d=identicon)[frontend.services](/maintainers/frontend.services)

---

Top Contributors

[![MatoTominac](https://avatars.githubusercontent.com/u/10546885?v=4)](https://github.com/MatoTominac "MatoTominac (2 commits)")

### Embed Badge

![Health badge](/badges/frontend-services-craft-compare/health.svg)

```
[![Health](https://phpackages.com/badges/frontend-services-craft-compare/health.svg)](https://phpackages.com/packages/frontend-services-craft-compare)
```

###  Alternatives

[spicyweb/craft-neo

A Matrix-like field type with block hierarchy

393813.5k10](/packages/spicyweb-craft-neo)[verbb/image-resizer

Resize assets when they are uploaded.

127276.0k8](/packages/verbb-image-resizer)[verbb/formie

The most user-friendly forms plugin for Craft.

102393.6k59](/packages/verbb-formie)[spacecatninja/imager-x

Ninja powered image transforms.

29405.1k36](/packages/spacecatninja-imager-x)[solspace/craft-freeform

The most flexible and user-friendly form building plugin!

54681.3k17](/packages/solspace-craft-freeform)[verbb/vizy

A flexible visual editor field for Craft.

4250.4k](/packages/verbb-vizy)

PHPackages © 2026

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