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

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.

Plugin Simply Does NOT WORK.

I cannot use this plugin. When I add it as a widget on a page and I attempt to click “Add Image”, nothing happens.

When I try to add the shortcode and insert the image URL’s in the before and after areas, nothing appears on the page.

This plugin is nothing but pure frustration.

Ok, it works. But…

If you place multiple instances of before-after images on one page, the html gets all messed-up. On every instance of a before-after image you get a total number of handles as there are before-after images on your page. This is very noticable at the (subtle) shadow effect that is repeated over and over and thus becoming darker and darker. Also page load becomes slower and slower.
Planning to use multiple before-after images on one page?
Then skip this plugin, and get the original Zurb scripts and css.

Read all 24 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