This block allows you to add two images (both from your collection, or uploaded, or one of each..) and then displays an interactive “before / after” view:

The user can drag the slider across the screen, showing the before or after image.

This sort of view can be useful to show things like landscapes or old photographs as they were at different points in time – or (per the example here) you can add simple annotations onto one of the images to help illustrate a particular feature.

The interface for the before/after slider looks like this:

To use it, simply select the following:

Before / After image type – whether this is an image from your collection or not
Before / After image – the actual image. For collections images, just search or select from the object dropdown. For non-collections images, upload or select from your media library.
Image width / height – you will need to match the image width and height, or at least provide a ratio that matches your images.

Note that both the before and after image must be the same size for this block to display correctly. If you have different sized images, they will appear squashed or compressed!

View our Examples page to see the before/after slider in action.