How to Show Image Comparison in Gutenberg Editor

Image Comparison shows the difference between two stages of an image. As a result, a customer can easily figure out the changes in the image. If you are using WordPress Gutenberg Editor to format your content and you are feeling the need of showcasing this type of image comparison in Gutenberg, then this post will help you a lot.

Gutenberg Editor provides some default blocks where you won’t find any block that can satisfy your need for showcasing image comparison. For this reason, we have to find out a simple, lightweight block plugin that will provide us with an extra Gutenberg block to satisfy our needs. 

After a long research on different block plugins, I became disappointed and finally, I decided to bring a minimal block plugin that can satisfy the need of showing image comparison in Gutenberg. Finally, I have released the block plugin. Today I will present the block step by step so that you can easily follow this and show your own image comparison in your favorite editor. 

Image Comparison Block Installation and Activation

Before going to start using the block, first install and activate the Image Comparison Block plugin. It is a simple, light-weight and super-fast block plugin that comes with the following extraordinary features:-

  • Built with only Gutenberg Native Components, no blocks builder
  • Slick, light-weight, and 100% responsive
  • Horizontal and vertical, are two types of image comparison
  • Images before and after labels are available

Add Comparison Block in Gutenberg Editor

Once you finish the plugin installation and activation, you will find an extra custom block in your block’s inserter library. It looks like the following screenshot- 

Image Compare

Now, simply drag and drop or click on the block icon to add the block in the editor area. By default, it looks like the following screenshot until you add the before and after image.

Image Comparison Block

Add Before and After Images 

Now, it is time to add the before and after images to see the image comparison. You will find the Images Options pane on the right side where two upload buttons are available to upload the before and after images. So, use these buttons to upload the images. In addition, you can also edit or delete the images after adding them. 

Once you add both images, you can see the image comparison is now visible in the Editor area. That’s the default result of this block. See the screenshot- 

Image Comparison in Gutenberg
Image Comparison

Customize Settings for Image Comparison in Gutenberg

If you want to customize the default behavior and make your own output, you can easily customize it as per your need. To do that, you have to open the Compare Options panel on the right side. Suppose, I want to show the before and after labels. So, simply enable the Show Labels option and you will find two fields to add custom labels. Once you finish it, you will find the following result:-

Image Comparison with Labels
Image Comparison with Labels

Leave a Reply

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