Digital Photography Tips, Tutorials and Resources
Do you want to display before and after images on your website? You may want to display a before and after photo without having to use photo editing tools like Photoshop or Canva. In this article, we will share how to show before and after photos in WordPress alone.
Displaying Before and After Photos
First thing you need to do is go to install and activate the TwentyTwenty plugin.
To do this, simply go to Plugins » Add New from your WordPress backend. In the search bar, type “TwentyTwenty” and press the Enter key.
You need to click on the Install Now button next to the TwentyTwenty plugin to install it.
In the next window, click on the Activate Plugin link.
Upon activating the plugin, go to Posts » Add New, or edit an existing post where you would like to add the before and after photos.
In the Text editor, you’ll need to add your before and after photos by clicking on Add Media and uploading your images. Make sure that both the images have the same dimensions.
After adding the images in the Text editor, type or copy and paste the [twentytwenty][/twentytwenty] plugin shortcode. Your tags should be placed in between these shortcodes, as shown below.
It will automatically make the first image your “before” photo and the second image your “after” photo. Click on the Publish button to save your changes.
That’s all. Go to your website to see the display of before and after photos:
You can move the slider to left or right. As you move the slider, the Before and After labels will disappear. (Click here to view a live demo.)
We hope this article has helped you to learn how to show before and after photos in WordPress. You may also want to check out our guide on how to display WordPress photos in columns and rows.