TwentyTwenty

Show before-and-after pictures in your blog, with an interactive slider that allows users to compare them.

Author:Corey Martin (profile at wordpress.org)
WordPress version required:3.5.1
WordPress version tested:4.0.38
Plugin version:1.0
Added to WordPress repository:31-03-2014
Last updated:28-11-2017
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:96
Rated by:23
Plugin URI:http://wordpress.org/plugins
Total downloads:59 889
Active installs:6 000+
plugin download
Click to start download

This plugin brings the power of Zurb TwentyTwenty to your blog. From our friends at Zurb:

We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it’ll be clear exactly what changed. We even thought about having one image fade into another. But we knew there had to be an even better way to highlight the differences between two images. A way that would bring everything into focus.

Find out more about TwentyTwenty, and see examples, on the official TwentyTwenty site from Zurb.

Watch this screencast to see the plugin in action and learn how to use it.

Instructions

  1. Make sure your before and after images are the same size. The before-and-after box will use the size of the first image, and assume that the second image is the same size.

  2. Insert two images into a post, one right after the other.

  3. Before the first image, type [twentytwenty]. After the second image, type [/twentytwenty]. See the second screenshot for an example.

Watch this screencast to see the plugin in action and learn how to use it.