Search

How to Create a Comparison Image in Gutenberg (without Plugin)

In the world of content creation, showing the before-and-after effects of a change or the complete differences between two images can have a huge impact. Although WordPress’s Gutenberg editor has many tools for making interesting content, there is not a specific block for making comparison images.

If you want to make comparison images without using any extra Gutenberg-specific plugins, this detailed guide will demonstrate all the necessary steps. The method that we use is to turn the Gallery block into a comparison image.

Steps to Create Comparison Images in Gutenberg

Step 1: Add the Code Snippet to the functions.php File

First, we will add the PHP snippet to the functions.php file.

On your WordPress dashboard, go to Appearance > Theme File Editor. You can find Theme File Editor under the Tools menu if you’re using a block theme.

Once you enter the Theme File Editor page, select the functions.php file. Afterward, paste the PHP snippet below at the end of the function file content. Next, update the theme file by clicking the Update File button.

/** 
* Creating a Comparison Image in Gutenberg Without Plugin
*/
add_filter( 'wp_footer', function ( ) {  ?>
<style>
.galleryblock-main-container-wpb-comparison-images *,
.galleryblock-main-container-wpb-comparison-images *::after,
.galleryblock-main-container-wpb-comparison-images *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.galleryblock-main-container-wpb-comparison-images img {
  display: block;
  max-width: 100%;
}
.galleryblock-main-container-wpb-comparison-images {
  display: grid;
  place-items: center;
}
.galleryblock-image-container-wpb-comparison-images {
  display: grid;
  place-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  max-width: 100%;
  max-height: 100%;
  --position: 50%;   
}
.galleryblock-slider-image-wpb-comparison-images {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}
.galleryblock-image-before {
  position: absolute;
  inset: 0;
  width: var(--position);
}
.galleryblock-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  /* for Firefox */
  width: 100%;
  height: 100%;
}
.galleryblock-slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}
.slider-line {
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 100%;
  background-color: #fff;
  z-index: 10;
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}
.slider-button {
  position: absolute;
  background-color: #fff;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
</style>
<script>
let numBASlider = 0;
let numBASlidertow = 0;
let galleryblockBASimages = [];
let galleryblockBASimagesAlt = [];
document.querySelectorAll(".wpb-comparison-images")?.forEach(e => { e.querySelectorAll("img").forEach(image => { galleryblockBASimages.push(image.src);
 if (image.alt) { galleryblockBASimagesAlt.push(image.alt); } else { galleryblockBASimagesAlt.push("image"); }
})})
document.querySelectorAll(".wpb-comparison-images").forEach( e => {
  const main = `<div class="galleryblock-main-container-wpb-comparison-images">   
   <div class="galleryblock-image-container-wpb-comparison-images" id="galleryblock-galleryblock-image-container-wpb-comparison-images${numBASlider}">
     <img decoding="async" loading="lazy"
       class="galleryblock-image-before galleryblock-slider-image-wpb-comparison-images"
      src="${galleryblockBASimages[numBASlidertow]}"
       alt="${galleryblockBASimagesAlt[numBASlidertow]}"
     />
     <img decoding="async" loading="lazy"
       class="galleryblock-image-after galleryblock-slider-image-wpb-comparison-images"
       src="${galleryblockBASimages[numBASlidertow+1]}"
       alt="${galleryblockBASimagesAlt[numBASlidertow+1]}"
     />		  
 <input type="range" min="0" max="100" value="50" aria-label="Percentage of before photo shown" class="galleryblock-slider" id="galleryblock-slider${numBASlider}" /><div class="slider-line" aria-hidden="true"></div><div class="slider-button" aria-hidden="true"> <svg xmlns="https://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256" > <rect width="256" height="256" fill="none"></rect> <line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" ></line> <line x1="96" y1="128" x2="16" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" ></line> <polyline points="48 160 16 128 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" ></polyline> <line x1="160" y1="128" x2="240" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" ></line> <polyline points="208 96 240 128 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" ></polyline> </svg> </div>
   </div>       
</div>`
e.insertAdjacentHTML("afterend",main  );
e.remove();
const container = document.querySelector(`#galleryblock-galleryblock-image-container-wpb-comparison-images${numBASlider}`);
document.querySelector(`#galleryblock-slider${numBASlider}`).addEventListener("input", (e) => {
  container.style.setProperty("--position", `${e.target.value}%`);
})
numBASlider++;
numBASlidertow = numBASlidertow + 2;
} )  
</script>
<?php });

Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can create a child theme or custom plugin. Read here to learn more.

Step 2: Add the Gallery Block

As we mentioned earlier, we will use the Gallery block to create a comparison image.

Open the WordPress editor in Gutenberg, then add a Gallery block to the content section. Afterward, add two images by uploading new ones or selecting from your library.

Once you add the images, you can edit and style up the Gallery block with your preference.

Note: Please ensure to set the Column of the Gallery block at two columns, and turn off the Crop Images option. For the better quality of your comparison images, you can change the Resolution to Full Size.

Step 3: Add the Additional CSS Class

Finally, we come to the final step of this article. In this step, we’re going to add CSS class to the Gallery block.

On the Gallery block settings panel, navigate to Advanced -> ADDITIONAL CSS CLASS(ES). Afterward, add the wpb-comparison-images CSS class name to the ADDITIONAL CSS (ES) input field.

That’s it. To see the result, you can preview your page by clicking the Preview button. Don’t forget to save or publish your project if you want to.

The Bottom Line

You have learned, in this tutorial, how to make a comparison image in Gutenberg without the need for a plugin. Using a combination of a PHP snippet, a Gallery block, and an additional CSS class, you have learned how to create a drag-and-swipe comparison image to show the difference between two images.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment