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.
Tip
Unless otherwise noted, all modules and tools support these layout and position values below.
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. |
Caution
If an asset has values for both position
and layout
, the layout
will take priority.
Live demos
The images and videos demo pages offer good looks at asset positioning.
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.
Tip
Because Storytelling Components do not appear on distributed platforms it is a best practice to target Presto assets that reflect the desired content. That way, the value of the content is reflected across all possible platforms, even if it is displayed differently on the In-Depth platform.
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
{}