How to Show Before and After Photo in WordPress

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

Subscribe to WPBeginner

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+.

Leave a Reply

Your email address will not be published. Required fields are marked *