Instructions
Interactive article is a new article format that can be used for full-screen, immersive articles that make use of multimedia and interactive content.
It consists of full-screen scrollable sections with have a background image, color or video, and can contain any editorial content.
Go to article backend, and click "Enable interactive article".
Here you'll be able to start creating an interactive section, starting with the background type.
This is the recommended option for the first section of the article. It add a bolder, more focused styling which differentiates the "cover page" from rest of the article. A byline styling can be added from the formatting options.
The main difference between Body text and Lead text is that lead text has a larger font size. It can be used, for instance, to add a section with less text but a larger font to emphasize a certain paragraph of the story.
The primary default styling of the article.
This option can be used, when a section will simply contain a video embed (Youtube, Vimeo). If additional text is required, please use Body or Lead text sections.
Image background simply requires one image in JPG format, all other controls are optional.
A separate mobile image can be used, if the main image scales poorly for mobile.
In addition the image brightness can be reduced to improve text legibility, and background alignment can be adjusted to focus the image correctly. Typically, this will be most useful on mobile.
This option is quite straightforward - A black background will have white text, and vice versa. This is reflected in the text editor as well.
For the video background we will need, at a minimum:
- The main background video (max 5MB)
- Animated GIF image (max 3MB)
- A screenshot image of the video (max 200kB)
An optional medium-sized video can be uploaded, for tablets and smaller screens. If only one video is used, it should be uploaded twice (large & medium).
First, the section text styling can be selected.
- Cover will typically be selected for the cover/landing page section, which is the first section of the article.
- Large text is simply a section with slightly larger text. These can be thought of as "lead" sections for the story.
- Normal is quite self-explanatory, the main body section of the article
Selectors for Title and Paragraph.
These styles are not recommended for the first section, where "cover page" is the preferred styling.
Intro paragraph can be used to insert an intro text or standfirst, which is a piece of writing between the title and paragraph.
Byline is mainly used for adding a specially styled byline on the cover page.
Caption is a piece of uppercase text describing the background image.
Copy-pasting
When copy-pasting, please use "Paste as text", which removes all previous styling. This is useful to keep the visual look of interactive articles consistent. It will also reduce the amount of issues encountered when using the editor.
Compressing videos
A good open source program for compressing videos (making them smaller) is Handbrake, available at Handbrake.fr. A good starting point are the Vimeo/Youtube presets.
Excerpt text
If the theme uses excerpt text for posts, the excerpt text should be added in the default Wordpress post editor.