TwentyTwenty Compare brings the popular jQuery TwentyTwenty plugin to WordPress with full Gutenberg block support. Compare two images with an interactive before/after slider.
Features
- Gutenberg Block – Native WordPress block editor integration with intuitive controls
- Shortcode Support – Use shortcodes in posts, pages, or widgets
- Multiple Options – Customize orientation, labels, behavior, and dimensions
- Responsive Design – Works perfectly on all devices
- Touch Support – Works with touch gestures on mobile devices
- Easy to Use – Simple interface for selecting and managing images
Block Features
The Gutenberg block includes:
* Image uploader for before/after images
* Visual preview in the editor
* Customizable labels (Before/After text)
* Orientation selection (Horizontal/Vertical)
* Slider offset control
* Behavior toggles (hover, handle-only, click-to-move)
* Dimension controls (width/height)
* Responsive mode
Usage
Using Gutenberg Block
- Edit any post or page
- Click the “+” (Add Block) button
- Search for “TwentyTwenty Compare”
- Click the block to add it
- Upload your before and after images
- Customize settings in the sidebar
Using Shortcodes
Basic Usage:
[twentytwenty_compare before="https://yoursite.com/image-before.jpg" after="https://yoursite.com/image-after.jpg"]
With Custom Labels:
[twentytwenty_compare before="before.jpg" after="after.jpg" before_label="Original" after_label="Edited"]
Vertical Orientation:
[twentytwenty_compare before="before.jpg" after="after.jpg" orientation="vertical"]
Custom Dimensions:
[twentytwenty_compare before="before.jpg" after="after.jpg" width="800px" height="500px"]
Shortcode Attributes
Attribute
Default
Description
before
required
URL of the before image
after
required
URL of the after image
before_label
“Before”
Label text for before image
after_label
“After”
Label text for after image
orientation
“horizontal”
“horizontal” or “vertical”
offset
“0.5”
Initial slider position (0-1)
width
“”
Container width (e.g., “100%”, “800px”)
height
“”
Container height (e.g., “500px”)
no_overlay
“false”
Hide label overlays
move_on_hover
“false”
Move slider on hover
handle_only
“true”
Only move via handle
click_to_move
“false”
Click anywhere to move slider
responsive
“true”
Make container responsive
Using in PHP
`php
`
Reviews
If you find this plugin useful, please leave a review at https://wordpress.org/support/plugin/js-twentytwenty/reviews/
Support
- GitHub: https://github.com/obaidhossain/js-twentytwenty
Screenshots
