Layouts with multiple images

Sometimes, you need more than one picture clustered together to tell a story. We built a framework to stitch up to four images or videos together into a single experience that can be placed like a standard asset. This feature is excellent for displaying multiple media items that tell a single story. Maybe you have a pair of before-and-after photos or a series of portraits of a relevant group.

It is not the place to put fully edited/designed videos or intricate illustrations (those probably should stand alone as their own assets in the article flow).

A multi-image block is anchored using asset replacement. We recommend using the "main" image or video as the anchoring asset in Presto. Multi-image blocks have a number of layouts available for each number of photos you're adding; on mobile they are stacked. See the demo page for examples of each.

Captions

Captions often are critical to attributing sources and assigning credit. Multi-image displays support a single caption for an entire display, entered into the configuration block. Different captions can be entered for mobile, tablet and desktop widths, which allows for rewriting directionals as the layouts shift across device breakpoints (i.e. Person A, above could become Person A, at right).

The base options for captions are caption and credit, which are used as the default values when captionTablet or captionDesktop are provided.

Caution

Presto captions are not used in multi-image diplays (i.e. in In-Depth), but they will appear on distributed platforms (AMP, Apple News, etc.).

Options

value purpose required default
storytellingComponent multi-image Yes
multiImageLayout The identifier of the layout you want.
position All standard positions are supported. No
layout All standard layouts are supported. No center-well
label Optional label above the design No
caption Caption displays underneath entire design. Will not pick up Presto captions. No
credit A photo credit. Same as the caption. No
captionTablet Photo identifiers in captions (e.g. "top", "left", "above", etc.) might change as the photos rearrange across devices. Separate captions for mobile (default caption value), tablet and desktop can be entered. The "caption" value will carry over to tablet and desktop if those values are not set. Tablet will carry over to desktop if not set.
captionDesktop Same as captionTablet No

Adding images

Images are added to a display via Presto ids, and can be published images or videos. The targeted asset (presumably an image) will be replaced, so if you want to see it, too, then add that ID here. The first item in the list will be treated as the "main" media.

{assets.2085804002}
// options here

[.assets]
*4453966002
*2843961001
*2827323001
[]
{}

Tip

Images for a multi-image display can be added to a story in Presto (for publishing on distributed platforms) and hidden in In-Depth using the asset's hidden: true property. This way images used in a multi-image layout also can appear on Apple News, etc.

Layout options

See the demos for live examples of each layout.

A diagram of all the layouts

Sample configuration

{        assets.2085804002}
storytellingComponent: multi-image
position: center-well
caption: This is a caption, but you need to change it.
credit: Groucho Marx, Cincinnati Enquirer
label: This is a label
multiImageLayout: 3B

[.assets]
*4453966002
*2843961001
*2827323001
[]
{}

What about Apple News, Google AMP, etc.

This multi-image block will only be available on In-Depth pages; distributed platforms like AMP and Apple News, as well as our native apps, will only display the "main" image of the set.

Analytics

Event Action Category Label
Display scrolls into view scroll tracking in view multi-image
When the user plays/pauses a video in a display storytelling-in-depth-multi-image-video-{play/paused}-{video's asset ID}

Examples