Overview
Show the difference your work makes with a draggable before / after image slider. Horizontal or vertical, keyboard accessible, Gutenberg block and shortcode.
- Show your results with a before / after slider
- Proves your work better than words
- Touch and keyboard friendly
Best for: Renovation, beauty, cleaning and photo editing
Installation
- Download revealr-before-after.zip from My account › My plugins or from your order email. Do not unzip it.
- In WordPress, go to Plugins › Add New Plugin › Upload Plugin, choose the zip and click Install Now, then Activate.
- Optional: set default labels and colors in Settings › Revealr.
Requires WordPress 6.0+, PHP 7.4+. Works with any theme, block themes and page builders.
Features
- "Before / After" Gutenberg block with image pickers and a live preview
- Horizontal (left / right) or vertical (top / bottom) comparison
- Drag, tap, or "follow the mouse" mode
- Keyboard accessible: arrow keys, Page Up / Down, Home / End, screen-reader friendly slider
- Gentle intro animation when the slider comes into view (can be turned off; respects reduced motion)
- Labels always shown, on hover or hidden; they fade when the handle covers them
- Image ratio: same as the photo, 16:9, 4:3, 3:2, 1:1 or 3:4
- Responsive images (srcset) and lazy loading
- Shortcode: `[revealr before="12" after="13"]`
- Lightweight: about 3 KB of JavaScript, no jQuery, no external service
- Translation-ready (French included)
Shortcodes
Paste a shortcode in any page, post, widget or page builder text block.
[revealr]
Options of each shortcode are described in the Features above and in the plugin settings page.
Updates
Updates are free. When a new version is out, it appears in Dashboard › Updates of your WordPress site and you can install it in one click, or turn on automatic updates in Plugins. This works for the zip downloaded from your Woo-Plugins account; older copies can be replaced by downloading the latest version from My plugins. See the changelog.
Frequently asked questions
Which shortcode attributes are available?
`[revealr before="ID or URL" after="ID or URL" before_label="" after_label="" orientation="horizontal|vertical" start="50" mode="drag|hover" ratio="auto|16/9|4/3|1/1|3/4" labels="always|hover|none" caption=""]`
Tips for great results
Take both photos from the same spot, with the same framing and zoom.
Still stuck?
Write to us with your WordPress and WooCommerce versions and what you tried: we answer by email.