Twenty20 Image Before-After

Description

Twenty20 is the WordPress plugin of TwentyTwenty script that developed by Zurb team.

This sparked a few new ideas on how to do something similar for our own needs. It had to swipe between two images to show “before” and “after”. Most of all, it had to be responsive.

Demo
Twenty20 Demo

Features

  • Responsive and functional on all devices.
  • Doesn’t require images to work.
  • Easy and clean user interface
  • Add before-after on widgets.
  • Support popular page builders.
  • Support WP Image alt as image alt and title.

Support Page Builders

  • WP Bakery Visual Composer.
  • Elementor Page Builder.
  • UX Builder by UXThemes.

Quick Example

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]

Shortcode Parameters

  • img1 – image id.
  • img1 – image id.
  • offset – 0.1 to 1.0.
  • directionhorizontal|vertical.
  • alignnone|right|left.
  • width – Support both px and %.
  • before – Text.
  • after – Text.
  • hover – true or false.

Video Demo

Screenshots

  • Add Twenty20 before-after image.
  • Select any two images fro Media libray.
  • Twenty20 Shortcode setting page.
  • Shortcod.
  • Twenty20 in action.
  • Multiple slider in different direction.
  • Twenty20 Widgest.
  • Widget in action.
  • WP Bakery Visual Composer settings.
  • Elementor element.
  • UX Builder element.

Installation

  1. Unzip the download package
  2. Upload twenty20 to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

Manual Plugin Installation

  1. Download Twenty20 Plugin to your desktop.
  2. If downloaded as a zip archive, extract the Plugin folder to your desktop.
  3. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  4. Go to Plugins screen and find Twenty20 Plugin in the list.
  5. Click Activate Plugin to activate it.

FAQ

How it works?

Twenty20 works by stacking two images on top of each other. As the slider moves across the image.

Quick Example

[twenty20 img1=”” img2=”” direction=”vertical” offset=”0.5″ align=”right” width=”60%” before=”Before” after=”After” hover=”true”]

Shortcode Parameters
  • img1 - image id.
  • img1 - image id.
  • offset - 0.1 to 1.0.
  • direction - horizontal|vertical.
  • align - none|right|left.
  • width - Support both px and %.
  • before - string text.
  • after - string text.
  • hover - true|false.
How to add before-after slider?

Check the demo Video demo.

How to add widget

Check the demo Video demo.

Can I use more than one slider in single post or page

Yes, Twenty20 plugin allow user to add unlimited before-after slider.

Reviews

Excellent plugin but …

I think it’s great, I looked for many options that fulfilled this function and they were all obsolete 2 years ago or more. Thanks to you, this plugin is still updated and the support is very appreciated. Only, shortly, WordPress will update the old text editor to the new one called Gutenberg. It would be very much appreciated if they made it compatible as it is a useful tool and it would be a pity if it were lost by the new publication editor that has been renewed (for good honestly).

It would be great if they made it compatible with the Gutenberg editor. We would appreciate it very much. : D Thank you very much.

Gutenberg

Works well, thank you!

Worked for me as WPBakery page builder widget. Divider shadow is getting cut on top and bottom, so had to change it to simple line with background.

.twentytwenty-horizontal .twentytwenty-handle::before, .twentytwenty-horizontal .twentytwenty-handle::after should count real height, then shadow will work better.

Anyway, thank you!

Good plugin with good support

I’ve been using this plugin on several websites. It was almost perfect. Just missing the alternative text feature for the images. The plugin developer added that feature on the latest update. Thanks a lot for the great work!

Great plugin

Needed a replacement plugin for Bovkun’s “Slider comparison image before and after” since it appears to no longer supported.

Dropped it in, added images and it works fine.

Thank you!

with ability to disable overlay, now back to great plugin

UPDATE: The latest update 1.5.3 fixes the issues noted below.

PREVIOUSLY: Up to version 1.2, I loved this plugin; it worked great, looked great, and I had no issues with it. But with version 1.3 (and now still up through the current 1.5.2), that added new “feature” of including a gray overlay with “before” and “after” captions has destroyed the functionality of my images. I used to be able to right-click on each image to download it to my computer (not critical for me as the site owner, of course, but I also encouraged the visitors to my website to do the same if they wanted higher resolution versions of the images). However, now the images are buried under that gray overlay and are no longer accessible. If being able to allow users to access the images is important, you’ll want to use a different before/after plugin (or hope this one returns to its roots).

Another related consideration with this overlay is that if you drag the slider all the way to the left or the right, you’ll obviously be viewing just one of the images, but *both* captions are visible and so it appears a bit ambiguous.

I contacted the developer about the overlay a few weeks ago and he indicated he’d look into fixing this in a future update (the easiest fix would seem to be to just remove the overlay, or make it so that it can be turned off), but unfortunately in the latest update the issue is still there. From the support pages, I took perkinsb1024’s advice about hiding the gray overlay with custom CSS (which works well with regard to the look of the overlay), but be aware that that doesn’t fix the fundamental issue: the images are still inaccessibly buried underneath the overlay container. Unfortunately, I may eventually have to reluctantly switch plugins if this issue can’t be fixed, so be aware of this limitation of twenty20 if you require user accessibility to the images.

As I noted above, this plugin was formerly probably one of the best of the before/after plugins. It was simple to use and the visual results were excellent. But perceived “improvements” may not always be actual improvements. I look forward to when this plugin returns to its past glory.

Read all 26 reviews

Contributors & Developers

“Twenty20 Image Before-After” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.5.5

  • Fix: Widget mouse over.

1.5.4

  • Added: Integrated with WP Image alt.

1.5.3

  • Fixed cation overlay issue.

1.5.2

  • Fixed Before and After shortcode insert issue

1.5.1

  • Fixed loading issue

1.5

  • NEW: Add Elementor Page builder support.
  • NEW: Add UX Builder by UXThemes support.
  • Minor CSS fixes

1.4

  • NEW: ‘Move slider on mouse over’.

1.3

  • NEW: Image Before and After caption.
  • Fixed arrow shadow css.
  • Widget updated.

1.2

  • Fixed alignment bug

1.1

  • Fixed width issue

1.0

  • First Release