Visually-enhanced display

Sometimes a pullquote or CTA needs a little bit more "oomf." Just a few more pixels to make an impact. In-Depth allows you to pair certain elements with a supplmentary visual.

A pullquote with a photo of Bruce Willis

This side-by-side layout helps draw attention to the featured component (currently limited to pullquotes and calls to action).

The visually-enhanced display comes in two parts:

The content, which is the original asset
The media, which is the visual element included.

Like most In-depth features, the media-enhanced component begins with a targeted asset. These layouts can be put in the rail positions, content well and full width.

This is not a storytellingComponent. The target asset is included in this display, so be sure to configure it as well. This will work for CTAs and all pullquote variants (including audio) so long as they are properly configured.

Supported media types are:

Images: Any static image can be used. Supported formats are .png, .jpg, .svg and .webp. Images also can be supplied by presto IDs.
Videos: Movie files will play as a silent movie (muted, looping autoplay). Supported formats are .mov, .mp4, .mpg and .webm
3D model viewers: See here for details. Any configuration needed for a 3D display also should be provided.

Examples

Options

Required

Property	Purpose	Default value
`enableMedia`	Must be `true`	`false`
`media`	The presto ID or absolute URL to a piece of media on the CDN.	none
`mediaAltText`	Good descriptive alt text. (Not required for videos or 3D models.)	none

Optional

Property	Purpose	Default value
`contentBackgroundColor`	Sets the background color of the content area to any valid CSS color.	None
`mediaBackgroundColor`	Sets the background color of the media area to any valid CSS color. Is useful when the media has transparency, such as a `png`.	None
`contentVerticalAlign`	Can be `top`, `center` (default) or `bottom`. Sets the vertical position of the content	`center`
`contentHorizontalAlign`	When set to `left`, the content appears first in horizontal layouts. Defaults to `right`	`right`
`mediaCover`	When set to `true`, the media will fill the available space completely, even if it means cropping. By default, the media will not crop.	`false`
`credit`	Credit line for the media. Credits for images supplied by presto ID will be used by default but can be overwritten, too.	none

Caution

When setting colors, it is up to the designer/producer to ensure that text is readable over colored backgrounds. Check your contrast ratio on any number of sites, including this one. A ratio of less than 4.5 will prove a great challenge for anyone with vision difficulties and is considered unreadable.

Sample configurations

{assets.63649363007}
enableMedia: true
media: https://www.gannett-cdn.com/indepth-static-assets/uploads/staging/546889002/ee2e35ec-588d-4258-a6dd-b9c82a24da66-giphy.jpg
mediaAltText: John McClain throws a white flag
contentVerticalAlign: bottom
contentHorizontalAlign: left
contentBackgroundColor: pink
mediaCover: true
credit: A talented artist
{}

{assets.63649363007}
storytellingComponent: CTA
text: Check out this awesome sidebar database! It's dope.
enableMedia: true
media: https://www.gannett-cdn.com/indepth-static-assets/uploads/staging/546889002/ee2e35ec-588d-4258-a6dd-b9c82a24da66-giphy.jpg
mediaAltText: John McClain throws a white flag
{}

What about AMP and Apple News

This layout only is available on-platform. Distributed platforms, like Apple News, will see the original asset in the default display.