Have you ever found yourself wanting to show the before and after shots of the same image? Usually people use Photoshop and put the images side by side. Now wouldn’t it be nice to have an interactive slider that shows the before and after shot? In this article, we will show you how to show before and after photo in WordPress without losing image sizes and quality.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
First thing you need to do is install and activate the TwentyTwenty plugin. The plugin works out of the box and there are no settings for you to configure.
Simply create a new post or edit an existing one. Next, n the post edit screen you need to upload your before and after photos and insert them into post.
You must make sure that both photos have the same dimensions.
After inserting images, you need to switch to the text editor and locate the image code. Next, you need to wrap both your images into [twentytwenty][/twentytwenty] shortcode like this:
[twentytwenty]<img src="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg" alt="Before photo" width="604" height="402" class="alignnone size-large wp-image-2367" /> <img src="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg" alt="After Photo" width="604" height="402" class="alignnone size-large wp-image-2366" />[/twentytwenty]
Now you can save your changes and preview the post. You will be able to see both your images layered on top of each other with a slider in the center allowing users to slide and see before and after photos.
The first image becomes the before image on the left, and the second one becomes the after image on the right.
As the users slide the handle towards each image the other image will become visible. Users can take the slider all the way to the right or the left to see the full before and after image. As the users slide the before and after labels will automatically disappear.
That’s all. We hope this article helped you learn how to beautifully show before and after photos on your WordPress site. You may also want to check out this article about how to find royalty free images for your WordPress blog.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.
Hi ,
Great feature, I am just wondering if this will work with my square space website ?
Cheers.
Sean.
Hi Sean,
No, it will not work on SquareSpace. Please take a look at our comparison of Squarespace vs WordPress.
Is this plugin free?
Hi Syed, I am in the process of designing my own WP site and am looking for a plugin just as you mentioned above. My only concern is that it has not been updated in 2 years! I will eventually purchase a premium plugin but would you still consider this safe to use?
I appreciate your time in advance!
Cheers
Rich
It should still work, but we do not recommend installing plugins that haven’t been updated in two years. You can try reaching out to plugin author and ask them if they intend to maintain the plugin.
This is exactly what I’ve been looking for thank you!
Hey Syed,
Handy tip for many businesses, Well presented before and afters images for garden maintenance or tattoo removal services are a couple that come to mind.
Cheers
Chris
Thanks for the tip!
To be honest though I think it would have been nice to add that this plugin was inspired by Zurb’s TwentyTwenty (http://zurb.com/playground/twentytwenty) and that on that site an awesome demo is available so the people immediately understand the function of the plugin better.
It’s not just before/after, the whole presentation is just pure awesomeness!