Skip to main content

Add and configure swipes

A swipe block is an interactive experience that allows readers to compare two maps or images.

Add a swipe block to a story

Use the following steps to build a swipe block:

  1. Click the Add content block button to open the block palette.

  2. Select Swipe.

    An empty swipe block is added to the story.

  3. Add media to each side of the swipe block.

    • To add images, click the Add media button on one side of the swipe block, choose Image, and upload an image from your files. Repeat this to add an image to the other side of the swipe block. For information about supported file types and size, see Media file reference.

    • To add web maps, click the Add media button on one side of the swipe block, choose Web map, and select a web map from the map browser. Repeat this to add a web map to the other side of the swipe block.

    • To add express maps, click the Add media button on one side of the swipe block, choose Express map, and add an express map. Duplicate the express map and make changes to it or add a new express map to the other side of the swipe block.

Swipe block building tips

Consider the following when building a swipe block:

  • You can adjust the size of a swipe block on the swipe block toolbar, which appears when you hover over the swipe block.

  • For swipe blocks with maps, you can configure map options such as map navigation, enabling the legend, and editing the legend title in Swipe options by clicking Options on the swipe block toolbar.

  • For swipe blocks with images, you can select Fit or Fill in the display options.

  • You can add a swipe block to a sidecar media panel. Adding a swipe to a sidecar narrative panel is not supported.

Add alternative text

Adding alternative (alt) text is required for all swipe blocks to provide support for search engines and readers using assistive technologies.

Use the following steps to add alt text to a swipe block:

  1. Hover over the swipe block to open the editing toolbar.

  2. On the editing toolbar, click the Properties button.

  3. Provide alt text that describes the swipe block and click Save.

The alt text is added to the swipe block.

Back to top