Multimedia content makes a story more visually engaging and extends the impact of narrative text. There are three types of media content blocks: image, video, and embed.
Note:
If you are using ArcGIS StoryMaps in an ArcGIS Enterprise environment that is not connected to the internet, linked media and online content are not available.
Add images and videos
You can add images and videos to the story from a local file or a web link. You can add them in the story cover, the body of a story, and immersive content blocks. Streaming video platforms, such as YouTube and Vimeo, are supported. For more information about the file types and sizes that you can use, see Frequently asked questions.
Use the following steps to add an image or video:
- Click the open button
to open the block palette. - Select Image or Video.
- Upload or link to an image or video file.
- To upload an image or video file from your computer, drag a file to the Upload tab or click the Browse your files button to browse your files.
- To link to an image or video from the internet, go to the Link tab and provide the URL.
The image or video is added to the story.
Add image galleries
You can add an image gallery in the body of a story by uploading images from local files. You can use this block to showcase a set of related photos, and each gallery supports a maximum of 12 images. You can choose from two layout options: Jigsaw or Dynamic squares. For more information about the file types and sizes that you can use, see Frequently asked questions.
Note:
Image galleries are not available by default for ArcGIS StoryMaps on ArcGIS Enterprise. To enable them, the portal administrator must select Show beta features from Organization settings.
Use the following steps to add an image gallery:
- Click the open button to open the block palette.
- Select Image gallery.
- Upload images from local files and click Create gallery.
The image gallery is added to the story.
Add timelines
You can add a timeline to illustrate a series of chronological events. You can choose from three layout options: Waterfall, Single side, and Condensed. You can add the time or date, description, and an image for each event in the timeline block. You can reorder the events in the timeline and also add or delete events in the block. You can add a spacer to indicate extended periods of time between the events.
Use the following steps to add a timeline:
- Click the open button to open the block palette.
- Select Timeline.
- Choose a timeline layout: Waterfall, Single side, or Condensed.
A timeline with two events is added in the story.
Note:
You can change the layout at any point in the authoring process from the Options menu in the timeline.
- Add time or date, description, and an image for each event in the timeline. Continue adding events as needed.
The timeline is added to the story.
Edit images and videos with the toolbar
The editing toolbar appears when you hover over images and videos. From the editing toolbar, you can change the size and placement of media, add attribution and alternative text details, or replace the media. You can choose whether to allow readers to expand the image from the image options. A thumbnail image is automatically generated and stored for all uploaded videos. The thumbnail image is shown initially for videos that are set to click-to-play or if the video cannot be loaded. You can replace the thumbnail from the video options.
Note:
Depending on its original size, you can resize the media frame to be small, medium, or large. Medium images must be at least 1200 pixels wide, and large images must be at least 1920 pixels wide. The float option offsets the media to the side and allows text wrapping around it.
Replace media
Replacing images and videos is supported for inline images and videos as well as for immersive blocks such as sidecar, slideshow, and map tour. Swipe, image gallery, and timeline blocks support replacing images.
Use the following steps to replace an image or a video:
- Hover over the media to open the editing toolbar.
- Click the More options menu.
- Click the Replace image or Replace video button (depending on the media type).
- Replace the media by adding a new upload or link and then click Replace.
The image or video is replaced and retains the same size and caption of the previously added media.
Add attribution
You can add attribution for images and videos in the story cover and in immersive content blocks. You can add attribution for uploaded and linked images and for uploaded videos.
Use the following steps to add attribution to images and videos:
- Hover over the media to open the editing toolbar.
- On the editing toolbar, click the Options button.
- Provide the attribution information in the Attribution field and click Save.
Attribution is added to the image or video as an icon in the upper corner of the media.
Add alternative text
Adding alternative (alt) text is recommended for all images and videos to provide support for search engines and readers using assistive technologies.
Use the following steps to add alt text to media:
- Hover over the media to open the editing toolbar.
- On the editing toolbar, click the Options button.
- Click Properties, enter alternative text that describes the media in the Alternative text field, and click Save.
The alternative text is added to the picture or video.
Configure video playback
You can configure the playback settings for uploaded videos that have been added to the main body of a story, in all map tour layouts, and in the media panel of the sidecar's docked layout.
Use the following steps to configure video playback:
- Hover over the video to open the editing toolbar.
- On the editing toolbar, click the Options button.
- On the Playback tab, select one of the playback options: Click to play, Autoplay without controls, or Autoplay with controls.
The selected playback option is applied to the video in the story.
Add embeds
You can add a wide variety of online content, such as web apps, dashboards, social media posts, and websites, to a story using the Embed block. When you embed online content, the story builder inspects the content and displays it as either interactive content or an embed card. Typically, the content is added as a card, a reliable reader-friendly format that opens the online content in a new browser tab when clicked. Some types of online content are added directly as interactive content, an embed block in the story that contains live web content. You can change the formatting of embedded online content to fit the content and your story.
Note:
In addition to embedded content and embed cards, you can also link to external online content by adding a button or a hyperlink to your story narrative. For more information, see Add narrative text.
Use the following steps to add online content:
- Click the open button to open the block palette.
- Select Embed.
- Provide the URL to the online content and click Save.
The online content is added to the story.
Note:
When embedding content in a story, it is best to use a web page or app from a public website that does not require a login. Content on a private network or content that is protected by a login may work under certain conditions. For example, web pages on a private network only work when the reader is connected to that network. Websites that require a login may work in some cases as a live embed, but the story builder will not be able to fetch card details from these sites. Additionally, many websites and apps that require a login restrict embedding as an added security precaution.
Formatting tips for embedded content
Consider the following when formatting embedded content:
- You can change the embed format by hovering over the embedded content and selecting the embed card or interactive embed format from the embed editing toolbar.
Note:
Some web content does not support embedding and will not display in the interactive embed format.
- For interactive embedded content, click the Options button to open the Embed options pane and configure the large-screen or small-screen appearance. For large screens, you can choose whether to include a button on the embed to open live content in a new tab, and whether to hide the Click anywhere to interact overlay on the embed that allows readers to directly interact with the embed. For small screens, you can customize the card details. From Properties, you can add alternative text, and copy the embedded content reference URL.
- For embed cards, click the Options button to open the Card options pane and customize the card details and copy the embedded content reference URL.
- On mobile devices, all embedded online content is displayed as cards.
Add audio
You can add audio to the story from a local file or embedded using a link or embed code from an audio hosting service. You can add audio in the body of the main story and in sidecar narrative panels. Hosted audio platforms, such as SoundCloud, are supported by the Embed content block option. For more information about the file types and sizes that you can use, see Frequently asked questions.
Use the following steps to add audio:
- Click the open button to open the block palette.
- Select Audio.
- Upload an audio file or provide a URL or embed code.
- To upload an audio file from your computer, drag a file to the Upload tab or click the Browse your files button to browse your files.
- To embed audio from the internet, go to the Embed tab and provide the URL or embed code.
Note:
The Embed option does not support links to audio files on a web server. This option is for embedding audio from audio hosting services.
The audio is added to the story.
Note:
You can change the size and placement of the audio player in the story using the editing toolbar, which appears when you hover over media. For uploaded audio, you can resize the media to be small, medium, or float. The float option offsets the audio to the side and allows text wrapping around it.