How to Create a Longform Story

Target Audience: Presto users

Summary:
A longform story template has been added to Presto, which enables users to create
longer stories organized with a chapter format. This article explains how to create a
new longform story project.
Longform is a digital storytelling template built by Gannett Digital for in-depth
journalism across desktop, tablet and phone. The template allows reporters and
editors to take advantage of a more immersive storytelling experience, including the
use of photos, video, text, and a chapter format. It is available for all markets
(USAT, USCP, and Broadcast).

An example of a story using this template is

here: http://www.usatoday.com/longform/news/nation/2014/03/
11/fugitives-next-door/6262719
To create a longform story:
At this time, the Preview button on the Create Story screen is not available, so
you cannot preview your story in the Production environment. You can create and
preview your story in one of these environments: Training (https://prestotraining.gannettdigital.com) or Staging (https://presto-staging.gannettdigital.com).
1. To create a new story, log into Presto, hover your cursor over
the Create menu, and select "Story." You can also import a story from Newsgate.
2. On the Create Story screen, select "Long form" from the Select Web
Template dropdown list near the bottom of the screen:

3. Fill out the appropriate Presto fields, and click the Save Draft button to save
your work.

4. To create chapters, click the HTML icon on the Story toolbar:

Cut and paste this sample code into the Enter HTML Here field, and
edit the text for your content (see annotated screenshot below):
<h2 class="chapter-marker" data-title="Chapter 1" dataimage="1395334856000" data-order="1">A fallen friend</h2>
<h3 class="chapter-marker-sub" data-title="A fallen friend">Too little,
too late</h3>

You can change these parameters in the first section of HTML code (h2 section):
<h2 class="chapter-marker" data-title="Chapter 1" dataimage="1395334856000" data-order="1">A fallen friend</h2>
Data-title (required). This is the chapter number. For this parameter, you
should enter the chapter number within double-quotes (i.e., datatitle="Chapter 1").
Data-image (optional). This image appears as a background image when a
user hovers their cursor over the chapter navigation area of the screen. The
image ID must be a photo asset used within your article, and should be
enclosed in double-quotes (i.e., data-image="1395334856000").
Data-order (required). This indicates the numeric order of the chapters, a
number enclosed in double-quotes (i.e., data-order="1").
Chapter-marker (required). This is the title of the chapter, and appears
after the data-order parameter, without double-quotes (i.e., >A fallen
friend</h2>).
You can change these parameters in the second section of HTML code (h3 section):
<h3 class="chapter-marker-sub" data-title="A fallen friend">Too little,
too late</h3>
Data-title (required). This is the chapter title that will appear in the chapter
navigation area of the screen, under the chapter number. For this parameter,
you should enter the title within double-quotes (i.e., data-title="A fallen
friend").
Chapter-Marker-Sub (required). This is the subtitle that appears beneath
the chapter title. You enter this value after the data-title parameter, without
double-quotes (i.e., >Too little, too late</h3>).
To create more chapters, repeat this process of pasting the HTML code and
modifying it with your chapter information, and place each code snippet
before the corresponding chapter text in your story.
5. Decide which assets you would like to include in your story. Photos and videos
can be added to Longform stories by dragging and dropping each asset, just
as you would add assets for a standard story page. For an annotated sample
layout, go to: https://www.dropbox.com/s/ozpwands9hzwdea/annotatedlongform.jpg
The assets you can add include:

Cover photo (required). The first image asset placed in the story becomes
the cover photo. To designate a different image for the cover photo cover,
select the image as the Layout Priority.

Single photo. Once you have selected a cover photo, photos added
thereafter appear in the story as right-aligned 400px wide 4:3 cropped
photos.

Full-width photo embeds can be embedded using these steps: Place the
photos you wish to make full-width contextually in your story, and click Save
Draft. Click the HTML icon on the toolbar to create a new HTML embed
asset, and copy/paste this code in the popup window:
<div class="hidden full_size_these_images" data-imageslist="XXXXXXX,XXXXXXX"></div>

Replace the X's in the photo ID list with your Presto photo ID(s). To get multiple fullwidth photos throughout your story, type a comma after the asset ID (no space
between), then paste the second asset ID (again, no space between the comma and
the ID). The order does matter. Save and insert the HTML embed into the story,
then delete the HTML embed symbol from the story window, leaving it in the asset
panel.

Photo Galleries appear as center-aligned 800x450 4:3 blocks, and are

added per normal workflow.

Videos appear as center-aligned 800px wide 4:3 blocks, and are added per
normal workflow.

Interactives appear as center-aligned 800px wide blocks, and are added per
normal workflow.

Pull Quotes appear as left-aligned text blocks, and can be added by clicking
the left quote icon on the toolbar.

Block Quotes are center-aligned and can be added to a text block by clicking
the right quote icon on the toolbar.

HTML iFrame embeds (desktop and iPad only) can be added by clicking the
HTML embed icon on the toolbar. Standard iFrame embeds can be embedded
within the story up to 1000px. (Note: These do not appear on mobile for page
performance and usability reasons.)

Inline social module

Ad units appear as a 300x250 (flexes to 600px depth depending on what is

sold) in the first chapter to the right of the third paragraph. Video preroll and
photo gallery interstitials are also available when advertising is left turned on
in Presto. Here is a visual representation of the ad
units: https://www.dropbox.com/s/dn4tpxd5zblsps0/longform_ad_specs.pdf

Series Navigation can be added to aggregate related content. It appears at

the bottom of any longform article as well as in the right-side series
navigation drawer. Turn this feature on by selecting the related tag from the
Featured Series picklist in Presto. (Note: To create a new tag, contact GMTI at
solutions@gmti.com.)

Frequently Asked Questions (FAQs):

Why isn't the longform presentation appearing on my phone? Mobile

web looks for the chapter headings in the longform project in order to serve
up the longform presentation. If the chapters are not included in the story or
do not use all fields as documented above, mobile web will serve up the story
template instead of the longform template. Also ensure that you have used a
promo item to program the longform story for native apps. (This applies to
anyone on the Gannett Enterprise Platform).

Why do I see a different cover photo being used on my phone? In

Presto, verify that your cover image has been set to "Priority Asset".

Why does the cover image appear inaccurate on my phone? In Presto,

verify that you have made the desired crops for the cover image.

Why don't the headline and chatter fit well on my phone? Consider
trimming your headline and/or promo brief field character count.

Why don't my custom embeds show up on my phone? For page

performance and usability reasons, iframes are excluded from mobile.

Can my longform story be monetized? Yes. In Presto, verify that you have
left the "Publish without advertising" checkbox unchecked.

Why can't I see my longform story after publishing? Verify that you
have manually changed the Presto URL from /story/ to /longform/ and that
you have left "exclude for mobile" unchecked.

Can I preview my story before publishing it? Yes. Click

the Preview button at the bottom of your screen. Your story can be
previewed as long as it is in Draft mode.

Where can I find additional information about the longform

template? http://longform.gannettdigital.com

Longform Points of Contact (POCs):

Technical Support: GMTI solutions@gmti.com or (757) 664-2255

Gannett Digital Product Owner: Kristin DeRamus, kderamus@gannett.com

We welcome your feedback. For thoughts and/or questions feel free to contact Kristin
DeRamus.
Check out the longform Yammer group: http://longform.gannettdigital.com