PlugIndex

Directory / plugin

TwentyTwenty Compare

v2.0.2 · by Obaid Hossain

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them!

View on WordPress.orgHomepage

About this plugin

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

  1. Edit any post or page
  2. Click the “+” (Add Block) button
  3. Search for “TwentyTwenty Compare”
  4. Click the block to add it
  5. Upload your before and after images
  6. 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

Plugin tags