Support Home > Photos and Videos > Image Compare Block

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.

 

How to add the Image Compare Block

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, select images from your Media Library, or select them from an external source, such as Google Photos or Pexels Free Photos:image-compare-select

 

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.

Data Used
Site Owners / Users

 

 

None.

Site Visitors

 

 

None.

Activity Tracked
Site Owners / Users

 

 

None.

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.

 
  • Table Of Contents

  • Categories

  • Contact Us

    Need more help? Feel free to contact us.