Using a before and after photo comparison can be extremely handy in a variety of situations. However, it can be difficult to display them side by side with the default tools. Luckily, with the Twenty20 Image Before-After plugin, it is easy to do.
It adds a unique block that allows the users to add two images. The images will be split within a slider that visitors can interact with to see more or less of one of the images. Due to the low difficulty, it is perfect for beginners.
Today, I will demonstrate how to display a before and after photo with the Twenty20 plugin.
Why Use A Before And After Photo?
The before and after effect is a powerful comparison tool that allows you to highlight the differences between the two images. And there is almost an endless number of reasons why a website would want to use this tool.
For websites that focus on entertainment like movies, television shows, or video games, before and after images are extremely useful. You can compare areas before a major event took place, characters from the beginning versus the end of a series, use them to highlight easter eggs, and more.
Some fitness gurus may want to show before and after photos of fitness successes for themselves or people they’ve helped.
Websites that may focus on covering news stories can use before and after images to great effect. For instance, it is common to see what a city looked like before and after a major storm or to highlight the effects of climate change over a period of time.
It’s also great for showing off what a product is capable of. For instance, if you are selling a cleaning product, it can be very effective in showing an area before the cleaning and after. In fact, this is extremely common in cleaning ads.
As you can see, and probably imagine, a before and after photo has great versatility for any website.
How to Create A Before and After Photo
Step 1: Install Twenty 20 Image Before-After
The Twenty20 Image Before-After plugin is a great addition to any website that wants to show off image comparisons. And it isn’t just for before and after images, you can compare two unique images to great effect with the slider.
Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.
Search for Twenty20 Image Before-After in the available search box. This will pull up additional plugins that you may find helpful.
Scroll down until you find the Twenty20 Image Before-After plugin and click on the “Install Now” button and activate the plugin for use.
Step 2: Add A Shortcode Block
Unlike most plugins, there is no settings page for Twenty20. Instead, you can begin using the tool immediately after activation. There are two ways to use this plugin, with an editor or using the before and after slider widget.
I will cover both, but first, we will examine how to use it in an editor.
Go to any existing post or page on your website and add a shortcode block. Alternatively, you can create a new one for testing purposes.
Click on the “+” button, search for, and select the Shortcode block.
Note: If you are still using the Classic editor, there is an actual button that you can click on in the editor. In fact, it’s slightly easier than using the shortcode.
Step 3: Using the Shortcode
The plugin allows you to define various aspects of the before and after slider in WordPress by editing the shortcode. Here is the standard shortcode the plugin uses:
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][twenty20 img1=”” img2=”” direction=”vertical” offset=”0.5″ align=”right” width=”60%” before=”Before” after=”After” hover=”true”][/ht_message]
This shortcode will not produce any results by default, instead, you need to enter a small amount of information into each piece. In total, there are 9 pieces of information to enter:
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 because they 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 are free to change it.
Hover: This decides if the slider is moved by mouse movement and it only accepts “True” or “False” and if set to true, a visitor can control the slider without clicking on it.
Once you fill out the shortcode and save the changes, you can view the slider on your live page or preview it.
You can use this method to add a before and after photo to any post or page.
Step 4: Add the Widget
Another way to use the plugin is to use its widget. It generates the same result as the previous step but is designed for the sidebar or footer area of your website.
Click on Appearance and select the Widgets option.
Locate the Twenty20 Slider widget and add it to the desired widget area.
Using the widget is much easier than the shortcode. You can enter all of the same information in a much simpler format. The biggest difference is that you can select the images from your media library instead of using the Image ID.
The end result will look identical to the editor slider we saw previously but will be resized to fit into the widget area.
Congratulations on setting up the Twenty20 plugin. Remember that you can set visibility options for widgets so the slider isn’t visible on every post or page.
You Don’t Actually Need A Plugin
It is important to realize that a plugin is actually unnecessary. In reality, you can make your own before and after image by using photo editing software like Photoshop.
It’s actually pretty easy to do and just requires resizing or cropping images and placing them adjacent to each other. and if you’re already familiar with the software, it would only take a few minutes to put together.
However, I would argue the Twenty20 plugin is the superior option.
Not only does it add the images, but it also lets visitors interact with them. The slider can be controlled by the visitor and that adds a lot of value to any page. It makes the visitor feel like they are in control of the content.
Support Your Before and After Photo with Text
In many cases, a before and after image speaks for itself. However, in some cases, there are very subtle differences that the average person will not catch. In these cases, you should highlight the differences in text. This can be as part of a paragraph or even just an image caption.
In either case, the text should complement your image.
How easy did you find the Twenty20 plugin to use? Do you think the plugin should consider adding a Gutenberg block instead of relying on shortcodes?