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.

Features

  • Responsive and functional on all devices.
  • Doesn’t require images to work.
  • Easy and clean user interface
  • Add before-after on widgets.
  • Support WP Bakery Visual Composer.

Quick Example

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%"]

Shortcode Parameters

  • img1 – image id.
  • img1 – image id.
  • offset – 0.1 to 1.0.
  • directionhorizontal|vertical.
  • alignnone|right|left.
  • width – Support both px and %.

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.
  • Visual Composer 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

Installation Instructions
  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.
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%”]

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 %.
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

Modal window issue

Does not work properly in a modal window. The resize fix, that I see is now included, does not work! Images do not show up unless you resize the browser window. I have spent hours searching for other fix options to no avail. Any solution would be gratefully received.

Missing Before|After & Image Alt Text Attribt

Very nice interface. Works with WP 4.7.3. The plugin is missing some basic features which hopefully the developer will work on.

1) There is no text displayed to indicate Before and After. See original twenty-twenty plugin

2) More importantly, your SEO will get dinged for each image because this plugin has no workflow provisions for adding Alternative Text Attributes. Yoast WP SEO zinged images using this plugin right away. The issue was reported about two months ago but no reply from developer. Perhaps he is working on something. Until Alt text Attribute provided, this plugin is going to lower your SEO. See original twenty-twenty plugin

Awesome

Seriously amazing. It was so simple. I uploaded this and started using it in less than 3 minutes.

Great job!

Love the implementation here, with the popup to add options. That goes above and beyond what I expected with a plugin like this. There are features that could be added (e.g. image cropping to make the images the same size if needed), but this is a great plugin that does everything you’d expect and more.

Works perfect for me

Works great for what I needed it to, thought I wasn’t gonna find a replacement for a very outdated plug but this one is good!

Flawless Victory

This integrates perfectly into Visual Composer and is a breeze to use. I was able to change the color of the slider to a darker color very easily with css since the “white” was hard to see with the images I was using.

Note to developer, maybe add the additional option within the attribute settings of the VC Element to change the color of the slider on the fly rather then having to change the css file with the plugin. Only thing missing.

Otherwise, great job!

Read all 11 reviews

Contributors & Developers

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

Contributors

Changelog

1.2

  • Fixed alignment bug

1.1

  • Fixed width issue

1.0

  • First Release