Display Before and After Images In WordPress With The TwentyTwenty Plugin

Have you ever wanted to combine two images to show a before and after? You can’t do that with WordPress out of the box but it’s possible if you use the TwentyTwenty plugin by Corey Martin. The plugin takes advantage of the clip property within CSS by stacking two identical sized images on top of each other. The clip property allows the image to show through the container. The slider is responsive and uses custom movement events within the jQuery Event Move library to support 1:1 slider movement on mobile devices.

The plugin is very simple to use. Upload two identical sized images to the media library. When inserting images into a post, make sure the attachment display settings for image size are the same. Add the [TwentyTwenty] shortcode above the before image. Add [/TwentyTwenty] after the second image. Here’s an example of the shortcode added to a post.

TwentyTwenty Shortcode In Action
TwentyTwenty Shortcode In Action

The shortcode generates a slider that can be moved back and forth. You’ll see which images are before and after when you hover over the slider. To see either image, users must click and drag the circle left or right.

TwentyTwenty Before Image
TwentyTwenty Before Image
TwentyTwenty After Image
TwentyTwenty After Image

The plugin was written using Sass and Zurb.com has a listing of each Sass variable used and what its default value is. The variables enable you to control everything from the handle color to the handle radius.

Here are a couple of ideas where TwentyTwenty would be ideal to use.

  • Compare counterfeit merchandise to real merchandise
  • Website redesigns
  • Home improvement renovations

During my test with WordPress 3.9, I didn’t experience any problems. According to Martin, TwentyTwenty is compatible with the latest versions of Chrome, Safari, FireFox, iOS, IE 9, and above. If you want to see the plugin in action, you can either watch this screencast by Martin or visit the plugin’s page on Zurb.com.

Outside of showing before and after images, what other creative ways could this plugin be used?

There are 10 comments

Comments are closed.