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.
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.
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?
Why don’t all plugins come with a great “how to” video like Twenty Twenty?