Search by

normann / silverstripe-before-after

normann

A draggable Before/After image comparison slider for SilverStripe 6, available as a reusable DataObject widget and as an Elemental content block.

Package info

github.com/normann/silverstripe-before-after

Type:silverstripe-vendormodule

pkg:composer/normann/silverstripe-before-after

Security

Advisories: 0

Aikido package health analysis

Transparency log

Statistics

Installs: 1

Dependents: 0

Suggesters: 0

Stars: 1

Open Issues: 0

2.0.0 2026-09-20 22:18 UTC

Requires

Requires (Dev)

Suggests

None

Provides

None

Conflicts

None

Replaces

None

BSD-3-Clause 3306077293916541c312cfb3d4c9bd23f3fdd4d1

  • Normann Lou <normann.woop@somar.co.nz>

cmssilverstripeimage sliderelementalbefore afterimage comparison

Published on Packagist.org on 2026-09-20 22:19 UTC

This package is auto-updated.

Last update: 2026-09-20 22:19:58 UTC

README

CI Latest Stable Version License

A draggable Before/After image comparison slider for SilverStripe 6 — 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:

Horizontal slider

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

Horizontal slider dragged toward Before

One of the two diagonal directions:

Diagonal slider

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

Slider direction picker

Editing the Elemental block, with a live preview alongside:

Elemental block editing, with live preview

Requirements

PHP ^8.3, silverstripe/framework ^6.0, silverstripe/admin ^3.0, dnadesign/silverstripe-elemental ^6.0, unclecheese/display-logic ^4.0, firesphere/rangefield ^1.3, bimthebam/silverstripe-native-color-input ^1.1. 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.