normann / silverstripe-before-after

1.0.0 2026-09-16 15:42 UTC

Requires

• php: ^8.1
• dnadesign/silverstripe-elemental: ^5.0
• silverstripe/admin: ^2.0
• silverstripe/assets: ^2.0
• silverstripe/framework: ^5.0
• silverstripe/versioned: ^2.0
• tractorcow/silverstripe-colorpicker: ^4.2
• tractorcow/silverstripe-sliderfield: ^4.2
• unclecheese/display-logic: ^3.0

Requires (Dev)

• phpunit/phpunit: ^9.6
• silverstripe/recipe-testing: ^3
• squizlabs/php_codesniffer: ^3.7

BSD-3-Clause

• Normann Lou

• cms
• silverstripe
• image slider
• elemental
• before after
• image comparison

Published on Packagist.org on 2026-09-16 15:58 UTC

README

A draggable Before/After image comparison slider for SilverStripe 5 — a BeforeAfterImage DataObject widget (its own CMS section) plus a BeforeAfterImageBlock Elemental block that drops it into any page.

Screenshots

The slider, on the front end, in its default horizontal direction:

...mid-drag, revealing mostly the "Before" image:

One of the two diagonal directions:

Picking a slider direction in the CMS — each option shows an indicative icon rather than a plain text label:

Editing the Elemental block, with a live preview alongside:

Requirements

PHP ^8.1, silverstripe/framework ^5.0, silverstripe/admin ^2.0, dnadesign/silverstripe-elemental ^5.0, unclecheese/display-logic ^3.0, tractorcow/silverstripe-sliderfield ^4.2, tractorcow/silverstripe-colorpicker ^4.2. See composer.json for exact constraints.

Installation

composer require normann/silverstripe-before-after
vendor/bin/sake dev/build flush=1

Usage

Standalone widget: CMS → "Before ‹[]› After" → add one, set images/slider/labels/badge across the Slider, Before, After and Badge tabs, then reference it from your own has_one and render with $YourRelationName.

Elemental block: with Elemental installed, "Before/After Image Slider" is available in the block picker. It links to one BeforeAfterImage, with an optional title/content in a choice of four layouts, and can match its own colours to the linked image's badge.

Configuration options

Field (on BeforeAfterImage)	Purpose
SliderDirection	horizontal, vertical, diagonalLeft or diagonalRight
SliderDefaultOffset	Initial slider position, 0–100 (%)
LabelsVisibility	alwaysShow, onMouseOver or hideLabels
BeforeLabel / AfterLabel	Text shown on each side
BeforeLabelPosition / AfterLabelPosition	Corner placement (non-vertical sliders)
BeforeLabelPositionVertical / AfterLabelPositionVertical	Left/center/right (vertical slider)
ShowBadge, BadgeShape, BadgeText, BadgeBackgroundColor, BadgeTextColor	Optional badge overlay

Contributing / Issues

See CONTRIBUTING.md. Bug reports and PRs via GitHub Issues.

License

BSD-3-Clause. See LICENSE.