Before and After

Usage

Before and After juxtaposes two photos with a draggable divider so visitors can compare them interactively. Upload a Before and After image — the block handles the slider on the front end.

Use it for renovation reveals, product transformations, landscaping results, or any creative side-by-side comparison where both images share the same framing.

Important constraint

Both images must use the same aspect ratio. The block sidebar shows a note when editing: mismatched proportions can prevent the comparison from rendering correctly. Crop or export both images at the same dimensions before uploading.

Block fields

Select the Before and After block in the sidebar:

• Before — the starting image (left side of the slider by default).
• After — the ending image revealed as visitors drag the handle.

No other styling controls are exposed. Layout and interaction are handled by the block template and the Knight Lab Juxtapose library.

Editor vs. front end

In the editor preview, both images display as a static diagonal split with an overlay explaining that the live slider appears on the front end. If either image is missing, the editor shows a placeholder prompting you to add both.

On the front end, the block renders a Juxtapose slider. Visitors drag the handle to wipe between before and after. Knight Lab attribution is hidden (data-showcredits="false"). Images load at full attachment URL with lazy-load skipping so the slider initializes reliably.

The block outputs nothing on the front end until both images are set.

Block width

Before and After supports Wide, Full, and Center alignment and defaults to Wide.

Tips

• Match pixel dimensions and aspect ratio between Before and After — square, 4:3, and 16:9 all work as long as both images match.
• Frame both shots from the same position for the most convincing reveal.
• For tabular feature comparisons with icons or text, use Comparison Table instead. For a single hero photo with copy, use Photo Feature.