Story map demo

Description

This page is a demo, not real content. It is kept unpublished on purpose and shows every component that can be added to a Resource in the Content field: Container (one and two columns), Rich text, Image, Image comparison and Gallery. This introduction is the Description / Abstract field, which is a plain rich-text field separate from the components below.

One column of text

A Container in the "EDW One column" layout, holding a single Rich text component. Every component has to sit inside a Container, so a full-width block of text looks like this. Rich text supports bold, italic, links, headings, lists and tables.

Two columns

This is the left column of a Container in the "EDW Two column" layout. The Image on the right is its own component in the second column, so the two can be edited and reordered independently.

Lists and tables

Bulleted item
Another item

Numbered item
Another one

Indicator	Value
Retention	1 200 m³
Area	3.4 ha

Image with a caption inside text

An image placed in Rich text with the Media button can carry its own caption: select the image and use "Toggle caption" in the editor toolbar.

Placeholder demo image: River — A caption typed on the embedded image.

Embedded iframe

The "Iframe Embed" button in the Rich text toolbar pulls in a page from another site - a map, a dashboard, a video player. Paste the address into src; the other fields the button offers are width, height and title. Fill in the title: it is what a screen reader announces in place of the frame, so it should say what the frame shows. Only those attributes are kept - anything else is stripped when the page is saved. A frame wider than the column, like the 800px one below, is scaled down to fit rather than allowed to overflow.

A second embed, from SpongeGIS. Whether a frame actually shows anything is the other site's decision, not ours: a server can send X-Frame-Options or a Content-Security-Policy frame-ancestors header that refuses to be embedded, and the browser then leaves the frame blank however correct the markup is. Both sources below currently refuse, so check a new address in a saved page before relying on it, and ask the source to allow this site if it comes up empty.

Working map example

Image comparison

Two images with a divider between them: drag the handle, or focus it and use the arrow keys. Upload a before and an after image with the same proportions, since the before image sizes the component and the after one is cropped to match.