Have you ever been in a spot where you wanted to show before and after photo results on your WordPress website? There are a number of reasons you may want to do this, but WordPress does not have this as a built-in feature.
For example, let’s say you have a photography website or an editing website. Showing before and after photos can help get your business by showing off photo editing skills. This could also be to show the effects of a tutorial.
Perhaps you want to show a side-by-side image of the results of an exercise routine, or when putting together a food recipe.
Whatever the reason may be, in this article I will show you how to easily show before and after WordPress photo results on your website.
How Does Before and After Photo Work?
To accomplish something like this more often than not you would use Photoshop or another photo editing software. Using a platform like this would allow you to create a before and after image and add it to your WordPress media library as a static image.
However, doing it manually can take quite a bit of time if you are not experienced. It can also cost a bit of money for the software.
A functional photo slider is an interactive way to show two different versions of a similar image in full size. You can move the slider handle to compare both images side by side. It’s also free to use. This is what we are going to accomplish in this tutorial.
Let’s take a look at how to show a before and after photo results in a WordPress website with the Twenty20 plugin.
Showing Before and After Photo Results in WordPress
The first thing you need to do is install and activate the Twenty20 Image Before-After plugin from your plugin page in WordPress.
I will explain how to use it in both the Gutenberg editor and the classic editor.
The Gutenberg editor does not have any buttons or blocks for this plugin. Instead, you will have to add a shortcode to the post or page you want the before and after photo to appear on.
Click on the “+” button and select the Shortcode block.
In this block, you can add any shortcode to it. In our case we want to add the plugin’s shortcode:
Note: This is the example shortcode provided by the plugin. You will need to edit it for it to work.
There are 9 different things you can edit in this shortcode.
Img1 & img2: This is where you can add the image IDs. Img1 will appear first (top in vertical view or left in horizontal view).
Note: To find the Image ID, go to your media library and hover over the image and look at the URL that appears at the bottom.
Direction: This is the orientation of your image. You can either type vertical or horizontal.
Offset: This should be a value between 0.1 and 1.
Align: You can either use none, left, or right. This works the same way as text alignment.
Width: This is the width of the image. You can either use a percentage or pixels. Pixels give you more control and are more exact than a percentage.
Before & After: This is a caption that appears at the bottom corners. By default, it says “before” and “after” respectively. However, you can change them to whatever you like.
Hover: This decides if the slider is moved by mouse movement and it only accepts “True” or “False” with “True enabling mouse movement. I recommend testing both so you can see them in action.
Once you have entered all of the necessary information save your changes and view it on your website.
Keep in mind that this method also works in the classic editor. However, they have a much easier way to add the slider into posts and pages, which is detailed below.
In the classic editor, you will see inside the post area that there is now an “Add Twenty20” button available for use. You will click on this to add two media images within the post.
Once the button has been clicked on your media library will open up. You can now select the two images you want as the before and after photo examples.
Once you have selected the two images, click on the “Insert” button. You will see that a pop-up box now appears where you can add some simple setting’s content and select a couple of other options.
Fill in the options how you like them and click on the “Insert Shortcode” button to add the before and after photo into your WordPress post or page.
Update or publish your post and you can now go to the front end of the website and see the live before and after photo example.
As the website 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 if they picked horizontal.
Alternatively, they can move the slider up or down in the vertical view. As the users slide the before and after labels will automatically disappear.
Using the Twenty20 Image Widget
Twenty20 Image Before-After also comes with a widget that you can place in any sidebar or widget area on your WordPress website.
To use the image widget to display the before and after photo, simply click on Appearance > Widgets section in your WordPress admin, and then drag the Twenty20 Slider widget in your Sidebar widget area.
The Twenty20 Slider widget has similar settings for the before and after photo, as I shared above in this tutorial. You can select the two images one by one in the widget settings to create the before and after photo slider.
Using some simple WordPress shortcodes, this plugin allows you to easily add before and after WordPress photo results to your website.
That will do it, congratulations! I hope this tutorial has been helpful and shown you how easy it is to show before and after photo results in WordPress with the Twenty20 plugin.
It Needs to Make An Impact
Before and after images can be used to great effect when showcasing the difference between specific images. For example, if you are covering the damage from a hurricane, it is very effective to show the city before and after the storm.
This works for a lot of concepts, but not all of them. In fact, it can hurt you in some cases.
For example, if you are trying to show off a product, if the before and after images aren’t impressive or barely noticeable, it isn’t very enticing to customers. As a result, they may decide to not even bother buying it.
Thus, you need to make sure it has an impact.
Did you enjoy using this plugin? Do you prefer using the Photoshop technique still and doing it more manually?
Author: Jeremy Holcombe
Growing up in Hawaii, Jeremy started his freelance writing career doing resumes, business plans, article writing, and everything in between. He now specializes in online marketing and content writing and is part of the Content Marketing Team at GreenGeeks.