Introduction

The Article View is a great way to display an article out of the restraints of the PDF and have more focus on supplemental data like image gallery, quotes, fact boxes, etc.   

The Article View 2.0 features an updated and more flexible version of the original article view with more styling and customization options applied to XML data. 

The details of our data elements and customization options can be found in this article and when you start a project with Visiolink, we will show you visual examples based on your data. 

This article will consist of a Visual Overview, followed by specifications of all the elements, sorted in these categories:

• General article information
• Article text elements
• Article enrichments
• Article interactions

Important note:
For an article to have the elements described here, you will need to deliver the data through XML.

Visual overview

1: The top article image area

2: Image text

3: Metadata field

4: Title

5: Blurb

6: Audio field

7: Byline

8: Content text

9: Fact box

10: Quote enrichment

11: Inline image 

 

General Article Information

The article information elements are located at the top of the article and underneath the top article image if one is present.

Category

The category is located at the top left of the article. The category takes the value of the category from the XML and shows the value on top of a rounded rectangle in the brand / key color.

Date

The date is located top right and shows the date of the current article. 

Page number

The page number is located to the right of the date with a separator line in between. 

Estimated reading time

The estimated reading time is located underneath the category. The estimated reading time is set to 200 words a minute. 

 

 

Article Text Elements

The supported article text elements from the importer include:

• Super headline
• Headline
• Subheadline
• Manchet
• Byline
• Body text
• Body text headers
  
  

Customizations

The styling of the articles is stored in a template package. The customization options include: 

Brand / key color

The brand / key color is set as a value and will be shown in multiple areas. 

A: The branded image line and top image indicator

B: The background for the category shape

C: The play button for the audio field

D: The circle behind the plus for the add-to-playlist button

E: The background shape for the fact box

F: The Quotation marks for the quotes 

 

Text Elements Styling

The styling of each article text element is independent of each other.  The styling is done in the Article View tool with CSS.

Font

The fonts are specified in the tool with the possibility to use third-party fonts. 

Font size

This is where the default size is specified. The size font is able to be changed in the font options menu. 

Font style

The font styles are usually normal, bold, or italic.

Font color

Determines the color of the font.

Line distance

Determines the distance between the lines.

 

Dark mode 

The dark mode offers separate styling of each element. This styling is called when the user switches to dark mode in the article options.

 

Article Enrichments

Enrichments are elements embedded in the article used to enrich the content.

For the features to work in the article view you have them implemented as a main functionality! * 

Exposed Article Audio Field

The audio of the article is created by the Text-To-Speech Google Wavenet (?). Playing the article can be done from the play-field in the article or from the headphones icon in the bottom bar. When the article is played the audio player is opened on the device.  

The play button and the add-to-playlist button are shown in the specified brand / key color.

 

 

 

*To play the article the implementation of Text-To-Speech is required as a main function in the app (or narrated articles feature)

 

Quotes

Quotes can be used to bring more attention to citations from the article. The quotes include the citation, the author/origin of the citation along with enlarged quotation marks. 
The quotation marks are shown in the brand / key color.

 

 

Fact Boxes

The fact box includes a branded headline and text. It can be shown next to article content on bigger screens. With tagging, you can ensure that the fact box can be shown at the correct position in the article. 

The color of the background shape behind the headline is in the brand / key color.

 

 

Images and Gallery

Images can be positioned both on the top of the article and in line with the text. When pressing or clicking either the top image or image in the article, the gallery will be presented. 

The image text of the top image is shown on top of the bottom of the image. A soft black gradient is placed behind the image text to ensure readability when the image is bright. The expand icon at the end of the image text signifies the gallery view. 

The gallery view shows a collection of every image related to the article. The image is presented on a black background with the image text underneath. The total number of images and current image number is shown at the top left corner.

If multiple images are available in the same article an indicator is shown underneath the article in the main view and a right-side arrow right is shown in the gallery view, to indicate the possibility to scroll through the images. 

 

HTML Elements

HTML elements are supported in the article view and can be embedded inside articles. This can be many different objects, like video or ads, but will need an initial project to make sure that what you, the customer, delivers to Visiolink is also something we can work with.

However we’re urged to emphasize that Visiolink is not responsible for functionality or design related issues related to the delivered HTML. 

That’s also when device is offline – or if the delivered HTML cause the App - for whatever reason - to crash or not working properly.

Visiolink will however test HTML Enrichments to confirm that it's working upon time of delivery.

Support on HMTL delivered to Article Enrichment will be on time and invoiced.

So please have the following in mind if you consider delivering HTML and scripts to AV2:

• Do you as a customer have the resources to support this feature when or if needed?
• What would readers expect to happen when device is offline?

Visiolink does not have any influence on – or chance to solve if an external HTML request or service do not correspond at any given time. 

 

Article Interactions

The article interactions can be accessed from the bottom of the Article View 2.0. The different icons represent a category of interactions. The full list of possible article interactions are the following:

* For the features to work in the article view you have them implemented as a main functionality! *

Bookmark 

When the bookmark icon is pressed the article is added to the list of bookmarks. 

 

Audio

Pressing the headphones icon will present two options:

• Play the article, which plays the audio of the article and opens the audio player in the app.
• Add to playlist, which adds the article to the playlist

Font options

Pressing the text icon will present two options:

• The possibility to switch between light and dark mode.
• The possibility to change the font size. The font size can be changed by dragging the slider or pressing the up and down arrows.

Search in Article

The search functionality allows the user to search in the current article. Every time a character is entered the search results are updated. When a search entry is made more options are presented. The options include next and previous search results. The search box also shows the total number of search results along with the current search results selected.

Share

The share menu opens the sharing menu native to the operating system of the device. 

 

Horizontal Progress Bar

When scrolling down the article, the brand-colored line underneath the top article image turns into a horizontal progress bar. The bar will expand or shrink in relation to the scroll depth to indicate how much of the article is left.