Title: TwentyTwenty Compare
Author: Obaid Hossain
Published: <strong>21 d'abril de 2017</strong>
Last modified: 25 de maig de 2026

---

Cerca extensions

![](https://ps.w.org/js-twentytwenty/assets/banner-772x250.png?rev=1642243)

![](https://ps.w.org/js-twentytwenty/assets/icon-256x256.png?rev=1642243)

# TwentyTwenty Compare

 Per [Obaid Hossain](https://profiles.wordpress.org/obaid2013/)

[Baixa](https://downloads.wordpress.org/plugin/js-twentytwenty.2.0.2.zip)

 * [Detalls](https://ca.wordpress.org/plugins/js-twentytwenty/#description)
 * [Ressenyes](https://ca.wordpress.org/plugins/js-twentytwenty/#reviews)
 *  [Instal·lació](https://ca.wordpress.org/plugins/js-twentytwenty/#installation)
 * [Desenvolupament](https://ca.wordpress.org/plugins/js-twentytwenty/#developers)

 [Suport](https://wordpress.org/support/plugin/js-twentytwenty/)

## Descripció

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

## Captures

[[

[[

## Blocs

Aquesta extensió proporciona 1 bloc.

 *   TwentyTwenty Compare Compare two images with an interactive before/after slider

## Instal·lació

#### Manual Installation

 1. Download the plugin zip file
 2. Go to Plugins > Add New > Upload Plugin
 3. Select the zip file and click «Install Now»
 4. Activate the plugin

## PMF

### What image formats are supported?

All standard WordPress image formats are supported: JPG, PNG, GIF, WebP, and SVG.

### Can I use this with page builders?

Yes! The shortcode works with any page builder that supports shortcodes, including
Elementor, Divi, Beaver Builder, and Visual Composer.

### Does this work with WordPress 6.5+?

Yes, the plugin is fully compatible with WordPress 6.5 and the latest Gutenberg 
block editor.

### Is this mobile-friendly?

Absolutely! The slider works with touch gestures on mobile devices and is fully 
responsive.

### Can I have multiple sliders on one page?

Yes, you can add as many sliders as you need on any page or post.

## Ressenyes

![](https://secure.gravatar.com/avatar/294cf5e4cc37c733c1accdd9f37022503436846d600d5b16d056cabc52563428?
s=60&d=retro&r=g)

### 󠀁[Simple, but nice](https://wordpress.org/support/topic/simple-but-nice-5/)󠁿

 [Joe](https://profiles.wordpress.org/joecole1/) 25 de abril de 2017 4 respostes

Very nice plugin, easy to use although it does require some very slight know-how
in order to add your image url’s. If you can figure out the url of an image you’d
like to add, you’ll be just fine, but there’s no media selector or anything, it’s
all manual. One small issue with css, I believe, but I expect it’s an easy fix.

 [ Llegiu tota la 1 ressenya ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/)

## Col·laboradors i desenvolupadors

«TwentyTwenty Compare» és programari de codi obert. La següent gent ha col·laborat
en aquesta extensió.

Col·laboradors

 *   [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/)

[Traduïu «TwentyTwenty Compare» a la vostra llengua.](https://translate.wordpress.org/projects/wp-plugins/js-twentytwenty)

### Interessats en el desenvolupament?

[Navegueu pel codi](https://plugins.trac.wordpress.org/browser/js-twentytwenty/),
baixeu-vos el [repositori SVN](https://plugins.svn.wordpress.org/js-twentytwenty/),
o subscriviu-vos al [registre de desenvolupament](https://plugins.trac.wordpress.org/log/js-twentytwenty/)
per [fisl de subscripció RSS](https://plugins.trac.wordpress.org/log/js-twentytwenty/?limit=100&mode=stop_on_copy&format=rss).

## Registre de canvis

#### 2.0.1

 * Improved security concerns provided by «Plugin Check»

#### 2.0.0

 * Added Gutenberg block support
 * New text domain: `twentytwenty-compare`
 * Improved UI with image previews in settings
 * Added Replace/Remove buttons for images
 * Updated jQuery TwentyTwenty library
 * New shortcode: `twentytwenty_compare`
 * Multiple language support added
 * Code refactoring and cleanup

#### 1.0

 * Initial release

## Meta

 *  Versió **2.0.2**
 *  Darrera actualització **fa 3 setmanes**
 *  Instal·lacions actives **70+**
 *  Versió del WordPress ** 5.8 o posterior **
 *  Provada fins a **7.0.2**
 *  Versió del PHP ** 7.4 o posterior **
 *  Idioma
 * [English (US)](https://wordpress.org/plugins/js-twentytwenty/)
 * Etiqueta
 * [Gutenberg block](https://ca.wordpress.org/plugins/tags/gutenberg-block/)
 *  [Vista avançada](https://ca.wordpress.org/plugins/js-twentytwenty/advanced/)

## Valoracions

 4 sobre 5 estrelles.

 *  [  0 valoracions de 5 estrelles     ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=5)
 *  [  1 valoració de 4 estrelles     ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=4)
 *  [  0 valoracions de 3 estrelles     ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=3)
 *  [  0 valoracions de 2 estrelles     ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=2)
 *  [  0 valoracions de 1 estrelles     ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/js-twentytwenty/reviews/#new-post)

[Visualitzeu totes les ressenyes](https://wordpress.org/support/plugin/js-twentytwenty/reviews/)

## Col·laboradors

 *   [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/)

## Suport

Teniu quelcom a dir? Necessiteu ajuda?

 [Visualitza els fòrums de suport](https://wordpress.org/support/plugin/js-twentytwenty/)