README

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

• Craft CMS 5.0+
• PHP 8.1+

Field Setup

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

Twig Usage

entry.myField.render()

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

Manual output

Access the raw data model to build your own markup:

{% set compare = entry.compareField %}

{% if compare %}
    <craft-compare
        position="{{ compare.startPosition }}"
        delay="{{ compare.movingDelay }}"
        {% if compare.initialAnimation %}
            animate
            animate-distance="{{ compare.initialAnimationDistance }}"
        {% endif %}
    >
        <img slot="before" src="{{ compare.beforeUrl }}" alt="{{ compare.before.alt }}">
        <img slot="after"  src="{{ compare.afterUrl }}"  alt="{{ compare.after.alt }}">
    </craft-compare>
{% endif %}

Available properties

<craft-compare> Web Component

The frontend relies on the <craft-compare> custom element, automatically registered when using render() or when the CompareFieldAsset is registered in the CP.

Attributes

Slots

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 }
            }
        }
    }
}