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 Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
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:
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.
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.
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.
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.
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.
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:
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.
Leave a Reply