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.

Twig Usage

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