The In-Depth Editor
In-Depth stories offer producers a means of putting a new face on articles coming from Presto, providing a multitude of options to create a compelling experience for the reader: attention-grabbing story toppers, dressed up images and videos, eye-catching chapter headers, and more. The In-Depth Editor it what make this possible.
At its core, the In-Depth framework receives an article from Presto — where Web Template has been set to "Storytelling Studio" — and uses a configuration document to apply various templates and styles to the text, adding and replacing assets along the way. That document is written in the Config Input pane using a scripting language called ArchieML.
The production version of the editor can be found here. A staging version is available here. Both require that you have access through Okta.
The Workspace
| key | key | key |
|---|---|---|
| 1 Configuration input | 9 Scroll-to-element-in-preview button | 17 Device scale control |
| 2 Collapse column button and save status | 10 Preview | 18 Device rotate button |
| 3 Publish button | 11 Refresh preview button | 19 New Presto ID button |
| 4 Assets/uploads panel | 12 Open in Presto button | 20 Copy Presto ID button |
| 5 Collapse panel button | 13 Open preview in new tab | 21 Content source options |
| 6 Asset type icon and preview | 14 Open published URL | 22 Simulation options |
| 7 Copy configuration snipped button | 15 Device mode toggle | |
| 8 Copy Presto ID button | 16 Device select menu |
Configuration Input
The Configuration Input is a simple text input in the left column of the editor — click to place the cursor and start typing away. Configs are auto-saved on a 2-second delay, meaning, stop typing for 2 seconds and your changes are automatically saved.
To expand the input vertically, click the Assets/Uploads bar atop the bottom pane. Click it again to expand the bottom pane.
ArchieML
Configs are written in a structured format called "ArchieML." A detailed understanding of ArchieML is not necessary, but for those interested, an introductory demo can be found at archieml.org.
The basic pattern is this:
{configSection}
property: value
{}
Details for possible values found throughout this documentation.
We also recommend adding a comment above each individual asset config to make it easier to keep track of which asset is which. A comment is any text that isn't part of the structured config. The two forward slashes aren't necessary, but they are standard indicator that what follows is a comment.
// yearbook photo
{asset.413897002}
layout: right-rail
{}
Assets panel
Assets (images, videos, embeds, pullquotes, galleries, etc.) in the Presto story are listed in the Assets tab of the Assets/Uploads panel. Each asset includes a preview, an icon indicating its type and three buttons:
- A Copy snippet button that will copy a config block for the asset, prepopulated with the Presto ID to target the asset and some possible configuration options.
- A Copy ID button that will copy the Presto ID for the asset.
- A Find in story button that will scroll the preview to the asset's location in the story.
Caution
An unpublished asset can result in the dreaded "OH SNAP!" error page when trying to load an in-depth story. In the event that a story contains an unpublished asset, the editor will display a warning icon next to the Assets tab button.
Uploads panel
Many in-depth components can be configured to use assets saved to a CDN (content delivery network). The Uploads tab offers controls to upload files from your desktop to the Storytelling CDN. Either drag a file to the drop target at the top of the pane or click Choose a file and select the file using the standard file dialog.
The input accepts .jpg, .png and .svg image files, .mp3 and .mp4 media files, .json and .txt data files and .vtt video/audio transcript files. The maximum file size is 25mb, though topper videos really need to be much smaller than that. After the file is uploaded, a preview will appear in the pane along with an icon indicating the assest type and a Copy file URL button to copy the CDN url for the asset to the clipboard for use in the Config Input.
The Remove file button doesn't actually delete the asset but merely hides it to help cut down clutter in the list. To view a file that has been "removed", click on Show removed files. Click on the Restore button of a removed file to move it back to the list of visible uploads.
Preview
The Preview pane displays the story with the config applied to it. The row of buttons and menus atop the preview pane work as follows:
- To see your config changes, click the Refresh button.
- Click the Open in Presto button to open the story in Presto in a new tab.
- Click the down caret next to the Presto button to open a menu with additional buttons:
- Open preview: This will open a preview in a new tab. Some in-depth features can only be previewed in this manner because of the limitations of iframes, which the Preview pane uses.
- Open published: Open the published version of the story in a new tab.
- To see what the story will look like on various devices, click the Device mode button.
- Click the New Presto ID button and enter a new id to open a different story in the editor.
Tip
Hold down the Command key (⌘) on Mac when you click the New Presto ID button to open a new editor in a new tab.
- The Copy ID button does just that — copies the Presto ID for the story to the clipboard.
- Click the More options button (the ellipses on the right) to reveal additional options:
- Use content api. This is the default content source for the editor.
- Use legacy api. Some older stories didn't transfer to the content api and may require this option to load. You'll likely never touch either of these first two options.
- Simulate subscriber. This option will reload the page as if a logged in subscriber is viewing it. Useful when testing non-subscriber roadblocks on stories.
- Simulate action bar. Places a mock action bar a the bottom of the preview when viewed under device mode at mobile phone widths.
Device Mode
Device mode allows you to get an idea of what the story will look like on various iOS devices. Screen dimensions are listed and can be used as a reference for devices from other vendors.
There are three controls available in device mode:
- A dropdown menu listing the available device previews.
- A dropdown menu with zoom levels to fit the preview on smaller screens or zoom in for a closer look.
- A rotate-device button to see what the story looks like in portrait and landscape orientations.
Publishing
Once you've added all the bells, whistles and audio quotes you can imagine to this thing, it's time to publish. The steps are:
1. Set story template in Presto
Inside the Presto article there is a section in the right column called Pub info. From there you'll want to look under the Digital Heading click on the Web Template drop down and select Storytelling Studio.
Pub Info > Digital > Web Template > Storytelling Studio
If the web template is not set to "Storytelling Studio", the Publish button will be replaced with a warning to that effect and a link to open the story in Presto.
2. In the config tool click Publish
In the config tool, if you have set the Web Template to "Storytelling Studio" you can and must click the blue Publish button in order for the changes you've made in the configuration tool to take effect on the live story.
Successful "Publish" is noted by the Publish button being greyed out.
3. In Presto click publish
Once you've confirmed the blue Publish button was clicked in the configuration tool you're all set to click the green Publish button in Presto.
Warning
If the blue Publish button is not clicked in the configuration tool the story will appear still render as an in-depth story but with no topper and default values for all assets and chapter headers.