Image Compare Block

The Image Compare block allows you to display and compare the differences between two images side by side (or above and below) thanks to a slider.

Here is an example:

Requirements

The Image Compare block is available on all Jetpack connected sites.

Adding the Image Compare block

You can add the Image Compare block by searching and/or selecting it from the Jetpack section of the block selector:

You can also find it by typing /image in the block selector:

See Jetpack Blocks for detailed instructions on adding blocks.

The block works best with two images of the same width and height.

You can drag and drop images to the block for both the before and after locations. You can also click the Upload button, or select from already uploaded images from your Media Library:

You can then also add a caption to the block after uploading your images.

Note: If you upload the wrong images, or wish to change the order, you will need to delete the block and start over.

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button.

Orientation Settings

Using the orientation settings, you can switch the orientation from side by side to above and below:

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

Troubleshooting

Add any known troubleshooting steps or likely FAQs, then…

If you’re having any trouble with the Image Compare block, please contact support for help.

Privacy Information

This feature is activated by default. It cannot be deactivated.