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.
1: The top article image area
2: Image text
3: Metadata field
6: Audio field
8: Body 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.
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.
The date is located top right and shows the date of the current article.
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
- Body text
The styling of the articles is stored in a template package. It is possible to create multiple template packages. 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.
The fonts are specified in the tool with the possibility to use third-party fonts.
This is where the default size is specified. The size font is able to be changed in the font options menu.
The font styles are usually normal, bold, or italic.
Determines the color of the font.
Determines the distance between the lines.
The dark mode offers separate styling of each element. This styling is called when the user switches to dark mode in the article options.
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 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.
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 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.
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! *
When the bookmark icon is pressed the article is added to the list of bookmarks.
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
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.
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.