How To Create a Before/After Effect on Your WordPress Images

Published in WordPress.

Did you ever want to compare two similar images, showing the differences between one and the other? Do you want this comparison to be interactive? Fortunately for you, there is a new plugin for WordPress that allows you to do that. And it’s from Nelio.

Nelio Compare Images is a simple WordPress plugin that adds a block to the block editor to compare two images. Best of all? It’s totally free. And works smoothly.

Image comparison is very useful in many different areas. Examples of this are clinics that show photos of patients before and after a treatment, restorers who love to highlight how well a piece of art looks after passing through their hands, or even for journalists who want to enrich their stories comparing an old photo with a modern photo taken at the same location.

Nelio Compare Images for Gutenberg

To use a block to compare two images in the WordPress block editor, just install Nelio Compare Images. To install this plugin, you do the same as you would with any other WordPress plugin. In other words, you go to the Plugins menu, select Add new and then search for “Nelio Compare Images”. Once you install and activate it, the block will be ready to be used.

To compare two images in your content, select the Compare Images block in the WordPress block editor. In the following screenshot you can see how to do it:

Nelio block selection to compare images in WordPress.
Nelio block selection to compare images in WordPress.

When you have added the block to compare images within your content, you will see that you have the option to include two images within the block. To add each of these images, go to the block and you will see that there are two sections. One allows you to upload the before image and the other the after image. You can upload these images to the media library, select them from the media library, or drag and drop the image you want to use on the image placeholder.

The Nelio Compare Images block allows you to select two images to compare in your content.
The Nelio Compare Images block allows you to select two images to compare in your content.

Also, when selecting the block to compare images you will see that in the right sidebar you have the option to set the alternative text for each of the two images to compare within the block.

This alternative text must include a description of the image and serves both to help blind people and search engines to classify the image.

The Nelio Compare Images block allows you to indicate the alternative text of each of the two images to compare.
The Nelio Compare Images block allows you to indicate the alternative text of each of the two images to compare.

Another option that you’ll find in the right sidebar is the possibility of modifying the initial position of the slider. By default the value is 50, indicating that the separation is in the middle, showing the left half of the before image and the right half of the after image.

If you choose a different value you will see how the block preview changes. The position of the slider will change according to the chosen value, as well as the visible part of each image within the comparison.

The Nelio Compare Images block allows you to indicate the initial position of the dividing line between the two images to be compared.
The Nelio Compare Images block allows you to indicate the initial position of the dividing line between the two images to be compared.

And in the block itself, below the images you are comparing you will see that you can write a descriptive text of the comparison. This is the same thing you find when you add a common image block in the WordPress block editor.

Finally, Nelio Compare Images allows you to compare two images both horizontally and vertically. In the toolbar of the block you have a button to change the orientation from horizontal to vertical comparison.

In the next screenshot you can see how the slider changes when you select the vertical comparison.

The Nelio Compare Images block allows you to compare two images both vertically and horizontally.
The Nelio Compare Images block allows you to compare two images both vertically and horizontally.

To see how the block looks like in your content, here are a couple of comparisons made with the Nelio Compare Images block. In the first one you’ll see how an area of northern Japan changed after the earthquake they suffered in 2011.

Vista satelital de Japón antes del terremoto de 2011.
Vista satelital de Japón después del terremoto de 2011.
Satellite images from Japan before and after the earthquake that took place in 2011. Source: The New York Times

But you can also use the image comparison block to compare two car models, such as the Ferrari F40 and the Ferrari F50. It is very interesting to move the slider with the mouse to compare both images:

Ferrari F40.
Ferrari F50.
Comparison between Ferrari F40 and Ferrari F50.

As you have already seen, the WordPress block editor makes it very easy for users to add visually complex content in posts and pages with little effort.

Nelio Compare Images allows you to add image comparison blocks to provide an interactive component into your content, sliding between the before and after images.

If you had to add this type of content in the classic editor you would have to use a shortcode, something much less friendly in terms of user experience. Therefore, that’s a win for Gutenberg.

Featured image by Glenn Carstens-Peters on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.