Canvas Docs

Image Compare

Before/after image comparison slider with configurable orientation, offset, handle style, and side labels. It is shown in the block inserter as Canvas Image Compare and registered as canvas-core/image-compare.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Image Compare settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Images

  • Before ImageDefault0

    The starting picture, shown on one side of the slider. Use two pictures of the same size and framing so the comparison lines up.

  • Before LabelDefaultBefore

    Caption over the starting picture.

  • After ImageDefault0

    The result, revealed as a visitor drags the slider across.

  • After LabelDefaultAfter

    Caption over the result picture.

Settings

  • OrientationDefaultHorizontal

    Whether a visitor drags the slider from side to side or up and down.

    ChoicesHorizontalVertical

  • Default OffsetDefault0.5

    Where the slider rests before anyone touches it, as a share of the width. Half shows an even split of the two pictures.

Handle

  • Handle StyleDefaultEmpty

    Shape of the grip a visitor drags, and whether it carries arrows showing which way it moves.

    ChoicesDefault (empty)Arrow TransparentArrow RoundedArrow SquareArrow Diamond

  • Handle ColorDefaultEmpty

    Colour of that grip. Pick one that stands out against both pictures.

    ChoicesWhite / None (empty)PrimarySecondarySuccessDangerWarningInfoDark

  • ShadowDefaultEmpty

    Drop shadow under the comparison frame, which lifts it off a flat background. Leave it empty for none.

  • Image ClassesDefaultEmpty

    Classes applied to both images, e.g. w-100 to make the pair fill its column.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.

Was this page helpful?