Assets

In-Depth offers a lot of control over how assets look and behave. These choices are configured in blocks of ArchieML, just like everything else in the editor. Well-positioned assets can make huge narrative enhancements to a style while boosting style and flare. In the end, it is all one memorable reader experience.

Configuring an asset

Assets all have unique identification numbers (IDs) in Presto, which also are used here.

Each asset has different options, detailed throughout this documentation. Properties for each asset, like most everything else in In-Depth, are configured in key/value pairs.

{assets.<asset ID>}
key: value
anotherKey: anotherValue
propertyName: value
{}

Finding an asset's ID

The asset ID for photos, videos and stories are pretty easy to find. IDs for pullquotes and other items can be tougher to track down. The easiest place to find an asset ID is in the In-Depth Editor asset tray. Each asset in the asset tray has a button that copies the ID to your clipboard, for pasting in the configuration panel.

Configuring multiple assets

Instead of configuring each asset individually, properties can be set for all assets in a story. This example, using the asterisk/*, would make all assets — photos, videos, pullquotes, everything — positioned to the right:

{assets.*}
position: right
{}

It is the equivalent of this example (which configures all assets in a story individually):

{assets.3457894735943}
position: right
{}

{assets.34759867438}
position: right
{}

{assets.34895038459}
position: right
{}

{assets.84359345}
position: right
{}

{assets.45645654}
position: right
{}

Asset placement

Assets are added to a story in Presto and will appear in the final In-Depth at that spot, in the "content well" — aka "the well," "story well" — which is the main column of article text. On either side of the content well are the article margins, called "rails."

On smaller devices, such as phones, all assets will appear in the default position of the content well. Some images, as noted below, will go "full bleed" and stretch the entire screen width, but most will line up with small margins on the left and right.

On devices with larger screens, such as tablets, assets can be sized and positioned using the layout and position properties.

Layout values

Layouts affect the arrangement and sizing of asset parts and are specified with the layout property.

Example:

{asset.754645352453}
layout: center-large
{}

Value	Purpose
left		This caption/credit is side-saddle, with the asset on the left.
right		This caption/credit is side-saddle, with the asset on the right.
center		The asset is centered, with edges bleeding into the rails.
center-large		This asset spans the full width of the screen.
center-well		The asset is constrained width of the content well. This is the default value

Position values

To place an asset in the rails, you need to use slightly different configuration. Both of these will push into the text slightly, and on mobile screens end up being treated as standard assets, centered in the content well. Positions are set with the position property.

Example:

{asset.754645352453}
position: right-thumb
{}

Value	Purpose
left-rail, right-rail		The basic horizontal position: assets are about 1/3 of the screen width and straddle the edge of the content well.
large-left, large-right		Assets are about 50% of the screen width and straddle the edge of the content well.
left-small, right-small		Assets are much smaller, and sit within the content well, flush to the edge.
thumbnail-left, thumbnail-right		For small images (like thumbnail portraits, logos or icons), thumbnail. Thumbnail images will be small and notched on all devices.
left-gutter, right-gutter		On large screens, assets pop from rail position fully into the margin.

Live demos

The images and videos demo pages offer good looks at asset positioning.

• Image demo page
• Video demo page

Asset swap

Many In-Depth features take an asset from Presto and transform it into something else entirely. These are called storytelling components. Calls to action, multi-image displays and scroll interludes all are examples of storytelling components.

A component begins with a asset placed in presto (usually a photo, video or a Presto embed). That asset is targeted with its ID and configured to be something else. The new feature will replace the target asset in the same spot in the story.

Example: Call to action

The asset in presto is an embed with a simple hyperlink to a related sidebar interactive. This is how it will look on Google AMP and Apple News.

<a href="https://www.usatoday.com/pretty/cool/interactive/"
    >Learn more from the database</a
>

We can make this link stand out a lot more, making it much more visible to readers. In the configuration panel, the embed is targeted by its ID and configured to be the CTA storytelling component.

{assets.6496439578}
storytellingComponent: CTA
{}

Now the will be replaced with call to action, but nothing yet will display. CTAs require a few key pieces of information before they will render.

{assets.6496439578}
storytellingComponent: CTA
text: Learn more from our database
buttonLink: https://www.usatoday.com/pretty/cool/interactive/
buttonText: Find your town
{}

Asset replacement

You can also swap one Presto asset for another Presto asset. In this example the asset with an id of 123456789 will be replaced with another asset that has the id of 987654321.

{assets.123467834}
assetReplacement: 987654321
}

Hiding assets

Sometimes it is desirable to place assets into a Presto story. Assets that are hiddent will appear on distributed platforms, but will not appear in In-Depth. This is useful in situations where assets are getting remixed and/or replaced in In-Depth, but need a presence on all platforms.

For example, a multi-image layout would display two or more photos, but for those photos to be seen in non-In-Depth situations they must be in Presto. Configuring the photos from the multi-image display to be hidden in In-Depth allow them to exist in both places.

{assets.4768374259843}
hidden:true
{}