How to Build a Image Comparison Plugin for WordPress

Posted on 20th June 2023

WordPress is a great platform for building all sorts of websites and applications. One common feature that is often required is the ability to compare two images side-by-side. This can be useful for a number of reasons, such as showcasing the before and after of a project, or highlighting the differences between two products.

In this tutorial, we will show you how to build a simple image comparison plugin for WordPress. This plugin will allow you to embed two images into a post or page, and provide your visitors with a slider interface that reveals one image or the other when hovered over.

Getting Started

The first thing you need to do is install and activate the Image Compare plugin. Upon activation, you need to visit Settings » Image Compare page to configure the plugin settings.

On the settings page, you will find two sections labeled as Image 1 and Image 2. In each section, you need to upload the images that you want to compare. The plugin also allows you to add a title and description for each image.

Once you are done, click on the Save Changes button to store your settings.

Using the Plugin

The image compare plugin works out of the box. However, there are a few things that you need to keep in mind while using it.

First, the plugin only works on images that have the same dimensions. That is, both the images should have the same width and height.

If your images do not have the same dimensions, then the plugin will automatically crop the larger image to match the size of the smaller image.

Second, the plugin only works on images that are added to the post content editor. It does not work with featured images or images that are added to other sections of your post or page.

To use the plugin, simply edit the post or page where you want to add the image comparison. On the post editor screen, you will notice a new button labeled as ‘Add Image Comparison’.

Clicking on it will bring up the media uploader interface where you can upload or select the two images you want to compare.

After uploading or selecting the images, you will be asked to provide titles and descriptions for each image. Once you are done, click on the ‘Insert Image Comparison’ button.

This will add the image comparison shortcode to your post editor.

You can now preview your post to see the image comparison in action.

Customizing the Plugin Settings

The image compare plugin comes with a few options that allow you to customize its behavior.

The first option is ‘Compare on Hover’. This option allows you to choose whether you want the image comparison to happen on mouse hover or on click.

The second option is ‘Animation Duration’. This option allows you to control how fast or slow you want the image comparison animation to happen.

The third and final option is ‘Before Label’. This option allows you to add a label that will be displayed before the image comparison.

You can enter any text you want in this field. For example, you can add labels like ‘Before’ and ‘After’.

We hope this article helped you learn how to build a image comparison plugin for WordPress.

Assuming you have a WordPress site running and are using the default theme, Twenty Seventeen, let’s start by creating a new plugin. In your WordPress root directory, create a new directory named image-comparison and in that directory, create a file named image-comparison.php. The contents of that file should look like this:

This is the bare minimum you need for a functional plugin. You can now activate it from the Plugins screen in your WordPress site’s admin area.

Next, let’s enqueue some CSS and JavaScript. In your plugin file, add the following code:

function image_comparison_scripts() {
wp_enqueue_style( ‘image-comparison’, plugin_dir_url( __FILE__ ) . ‘image-comparison.css’, array(), ‘1.0’ );
wp_enqueue_script( ‘image-comparison’, plugin_dir_url( __FILE__ ) . ‘image-comparison.js’, array( ‘jquery’ ), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘image_comparison_scripts’ );

This code tells WordPress to enqueue the image-comparison.css and image-comparison.js files when the site’s front-end is displayed. These files don’t exist yet, so let’s create them. In your plugin directory, create a new directory named css and in that directory, create a file named image-comparison.css. The contents of that file should look like this:

.image-comparison {
width: 100%;
overflow: hidden;
position: relative;
}
.image-comparison img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.image-comparison__before,
.image-comparison__after {
width: 50%;
float: left;
}
.image-comparison__before {
overflow: hidden;
}
.image-comparison__after {
position: relative;
}
.image-comparison__after:before {
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.image-comparison__after:after {
content: “”;
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drag-handle.png) no-repeat 50% 50%;
cursor: ew-resize;
}

This CSS sets up the basic styles for our image comparison plugin. It defines the width and height of the plugin container, the position of the images, and the styles for the before and after images.

Next, let’s create the image-comparison.js file. In your plugin directory, create a new directory named js and in that directory, create a file named image-comparison.js. The contents of that file should look like this:

jQuery(function($) {
var $window = $(window),
$imageComparison = $(‘.image-comparison’),
$beforeAfter = $(‘.image-comparison__before, .image-comparison__after’);

$window.on(‘load resize’, function() {
var windowWidth = $window.width(),
imageWidth = $imageComparison.width();

$beforeAfter.css({
width: (windowWidth / 2) – (imageWidth / 2)
});
});
});

This code sets up a jQuery function that runs when the page is loaded. It defines a variable for the window width, another for the width of the image comparison plugin, and then sets the width of the before and after images to half the window width minus half the width of the image. This ensures that the before and after images are always the same width as the image.

Finally, let’s add some HTML to our plugin. In your plugin file, add the following code:

function image_comparison_shortcode( $atts ) {
$atts = shortcode_atts( array(
‘before’ => ”,
‘after’ => ”,
), $atts, ‘image-comparison’ );

$html = ‘

‘;

return $html;
}
add_shortcode( ‘image-comparison’, ‘image_comparison_shortcode’ );

This code defines a function for our image comparison shortcode. It sets up default values for the before and after attributes, and then outputs the HTML for the plugin. Notice that we’re using the esc_url() function to sanitize our image URLs. This is a good practice to follow whenever you’re outputting user-provided content on your site.

Now that our plugin is complete, we can test it out by adding the following shortcode to a post or page:

[image-comparison before=”https://example.com/before.jpg” after=”https://example.com/after.jpg”]

This shortcode will output the HTML for our plugin with the before and after images set to the URLs specified. You can use any image URLs you like, but make sure they’re valid and that the before and after images are the same size.

And that’s all there is to it! With just a few lines of code, you’ve created a fully functioning image comparison plugin for WordPress.