Who, what, when, where and why

Storyteller through the eyes of a developer

First things first, what is Storyteller? From the frontend it’s a longform article with multimedia content (view the demo), but for a developer, the backend is where the real magic happens.

From the development perspective, we had to consider a number of important questions. How do editors create a story? Is it one article divided in chapters, or a collection of shorter articles put together in defined order? And what about slideshows, videos in the background, ambient sound, navigation levels? Are those separate elements that are combined together with text on one flat level, or is Storyteller a construction with several layers of all different elements?

As you can see, developing Storyteller was no easy task. It reminded me of sleepless nights as a student when we used to scramble to finish our architectural drawings that had to enable a clean and purposeful order and combination of elements in order to support the weight and forces, yet still be able to express attitude and stylistic cleanliness. This project was no less complex.

The structure of the story

The way we approached the creation of Storyteller in Newscoop 4.4 was to create one storyteller article (let's call it a wrapper article) that defines the basic elements of the story (title, teaser-like description, and teaser image that is also appropriate for sharing). Also within this ‘wrapper article’ we created an option to include a sidebar chapter navigation within the story or not (it’s one simple on/off switch).

Everything else, meaning the real meat of the story, is divided into smaller articles (chunks) that we call storyteller elements (article type ‘ST_element’ that is). These elements consist of slideshows, big text on white background, or content video. These ‘ST_elements’ are selected and included within to the wrapper storyteller article in a specific order, and that is how users build the stories in Storyteller.

To add these smaller articles in a certain order to the wrapper article, we use the ‘related articles’ feature of Newscoop. The main benefit is that it allows you to have all of the components of the story in one place in the Newscoop admin interface.

Our suggested setup for existing Newscoop sites that plan to publish storyteller longforms from time to time would be as follows:

• Create a separate issue (ie. Storyteller stories) with the storyteller theme assigned to it

• For every story, open a new section 

• Put all story elements there (so, one ‘storyteller’ article and all belonging ‘ST_element’ articles) 

• If your frontpage template uses a featured article list (also known as ‘article playlist’) you can insert any article from anywhere in the publication structure to it. Just make sure that the article type is set to ‘storyteller’ and the field ‘deck’ will be properly shown. The rest will work automatically. ‘Article’ will open in the new theme (because it is assigned to issue where storyteller article is)

Once you start creating your articles of type ‘ST_element’, there are a number of options available to you. For example, your article can be a chapter opening with a big title on the left top and in the background a nice full size picture, or a background with ‘parallax’ effect when scrolling, or a nice looping video. If it is a bigger piece of text, there is enough flexibility to define alignment, contrast, colors and the way images are inserted into the text. If it is a slideshow, it can be horizontal or vertical (for more information, read a very detailed manual that explains all possible options of Storyteller).

Creating an immersive reading experience

While coming up with the most effective structure for the longform stories based on Storyteller within Newscoop was a little bit of a challenge, the technical solution to nicely present different multimedia types and provide a smooth reading experience was much more complex.

In order to circumvent a known issue with video looping in chrome, which caused looped videos to be reloaded on every loop pass increasing the page load significantly, we implemented a feature to track the playing time of looped videos and reset current time with javascript. For all other browsers not affected by this issue, standard HTML5 video player looping is used.

For scrolling interactions we chose to implement Scrollmagic, which works with the Greensock Animation Platform (GSAP). Scrollmagic allows us to handle sticky content and parallax scrolling.

While working on Storyteller, some more conceptual questions arose such as,“What would the most natural environment for building such a story (from the editorial point of view) look like? The environment would probably consist of some nicely organized workspace where all textual and multimedia elements were available to drag & drop into the writing space, flexible enough to allow defining of backgrounds or custom position of galleries or, say, infoboxes. Storyteller currently utilizes all the capabilities of Newscoop to it’s fullest extent. We have ideas for making Storyteller more user-friendly and increasing the capabilities, but to execute it, we will need to use some interesting technology we are in the process of developing right now, Web Publisher. Stay tuned for details coming soon.

On the frontend, this construction needs to behave in an optimized, predefined way controlled by templates. Possibilities for storytelling are endless, but so are the chances to lose control over the content. A proper balance between these two is what we tried to achieve with version one of Storyteller. Version two is already being discussed!

Ready to give Storyteller a try? Read our guide to get started. If you haven’t already, you can download Newscoop for free.