Image Compare Block

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

Here is an example:

Requirements

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

The Image Compare block is available on all Jetpack-connected sites. It is a part of the Jetpack Blocks suite and is activated by default. The Image Compare block does not require a paid upgrade to use. See our Jetpack Blocks article to learn about the available blocks and how to activate them.

Jetpack Blocks require the Block Editor (also referred to as the Gutenberg editor). If you’ve installed the Classic Editor plugin, you will need to switch back to the Block Editor either by:

Deactivating the Classic Editor: Go to Plugins → Installed Plugins in your WP Admin and deactivate the Classic Editor plugin.
Enabling both editors: If you prefer flexibility, navigate to Settings → Writing in your WP Admin. Set Allow users to switch editors to Yes.

See Using Blocks and the Classic Editor for more details.
It may happen that an editor that comes with a custom theme or plugin prevents you from using the Block Editor. In that case, please contact the respective plugin or theme author for further assistance.

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.

After adding the block, you can add images to your gallery in the same way that you can add images to a regular image block.

You can upload them from your computer, select them from your Media Library, or select them from an external source.

Once you’ve added images, you can use the block toolbar and the sidebar to add your customizations.

How to use Image Compare block

You can 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.

Orientation Settings

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

Block Settings

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

Block settings.

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.

Still need help?

Please contact support. We’re happy to advise.

Privacy Information

The Image Feature block is activated by default. It cannot be deactivated. The Image Feature block is always available in the block selector.

Data Used
Site Owners / Users None.	Site Visitors None.
Activity Tracked
Site Owners / Users If disconnecting from Google Photos, we track that Google Photos is being disconnected.	Site Visitors None.
Data Synced (Read More)
Site Owners / Users We sync options that identify whether or not the feature is activated and how its available settings are configured.	Site Visitors None.

Data Used

Site Owners / Users

None.

Site Visitors

None.

Activity Tracked

Site Owners / Users

If disconnecting from Google Photos, we track that Google Photos is being disconnected.

Site Visitors

None.

Data Synced (Read More)

Site Owners / Users

We sync options that identify whether or not the feature is activated and how its available settings are configured.

Site Visitors

None.