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

It Works Great

It works just perfect! I would like the ability to add a caption to the pictures though. It’s kind of basic, I guess.

Brilliant!

This plugin is the easiest one I’ve even uploaded. I got it done in less than five minutes. So far, so good!

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.

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