Who, what, when, where and why

Enrich your Newscoop articles with info boxes

You know those small, extra boxes of information which accompany news articles? Everybody loves them! Editors like the added info, they are eye-catching, readers will see them, and the whole article becomes more easily digestible. Internationally they are known by the French name entrefilet (at least in traditional print journalism), but we can simply call them info boxes for our purposes.

In HTML 5, it is semantically clear, all this extra information should be placed in a nested structure. Over on html5doctor.com they explain, "for content that is not the primary focus of an article [or page] but is still related to the article [or page], is what you need, regardless of its visual design." However, in the article edit screen in the backend of the CMS, how can we give freedom to editors to put info boxes in custom positions inside the article body?

First of all, the info box content has to be separated from the content of the article. We don't want it to be marked-up with any HTML inside the article (not inserted into the body of the article). We need it to be an independent field inside the article, because that way we can share our article everywhere, without the fear that the marked-up piece will come up incorrectly or even break on another platform. 

Info boxes in Newscoop

So, how can we do that in Newscoop? Here we have a couple of options:

• Pre-defined position at the beginning or at the end of the main text.

In the template, we can simply create a container if the article field 'info_box' has some content inside it.

{{ if $gimme->article->info_box|strip }}

{{ if $gimme->article->infobox_title }}

{{ $gimme->article->infobox_title }}

{{ /if }}

{{ $gimme->article->info_box }} 

{{ /if }}

• Semi pre-defined position, after the first paragraph.

If the 'info_box' is defined, the main body field is exploded into an array either after first

or
(safety precaution for the undisciplined editors!), and then two pieces of data are outputted with the 'info_box' in between.

{{ if $gimme->article->info_box|strip }}                    

{{ $bodyArray=explode("
", $gimme->article->body, 2) }}

{{ if empty($bodyArray[1]) }}

{{ $bodyArray=explode("", $gimme->article->body, 2) }}

{{ $bodyArrayP=true }}

{{ /if }}                    

{{ $bodyArray[0] }}

{{ if $gimme->article->infobox_title }}

{{ $gimme->article->infobox_title }}

{{ /if }}

{{ $gimme->article->info_box }}

{{ if $bodyArrayP }}

{{ /if }}{{ $bodyArray[1] }}                     

{{ else }}

{{ $gimme->article->body }}

{{ /if }}

This method is pretty safe, because it is highly possible that every article will have at least two paragraphs.

Similarly, we could also place the info box after the second paragraph. In this case just do the same 'explode' on the second element in the array, as we did to the whole body field.

• Custom position inside the article body using shortcode

We can also come up with the short code for placing the info_box. The idea is to train editors to put some shortcode (for example [[box]] ) in the body of the article, and then make the template replace this with the content submitted into the field 'info_box'  and wrapped in the same container.

{{ if $gimme->article->info_box|strip }}

{{ $gimme->article->body|replace:”[[box]]”:"

{{ $gimme->article->infobox_title }}

{{ $gimme->article->info_box }}

" }}

{{ else }}

{{ $gimme->article->body }}

{{ /if }}

This solution gives more flexibility to the editors in terms of placement, but from the user experience, this is not the best solution. There are too many steps to get the info box in the desired position. Plus it is error-prone, the shortcode needs to be entered manually and the shortcode and info_box fields need to be synchronised etc. To improve this situation we need a shortcut in the WYSIWYG editor that inserts the appropriate code on the cursor after the icon is clicked.

Best solution

As we already said, the info boxes need to be an independent field in the article type. However, sometimes editors would love to have not one, but two or more info boxes on the page. Ideally, we would be able to dynamically add new fields with some magic '+' next to the existing field. In the WYSIWYG editor of the main article body field(s), options to insert info boxes should appear, similar to the article images. From a small gallery of info boxes defined for the article, we could choose one. Afterwards, we can specify alignment options, or simply assign pre-defined classes. And after pressing the 'insert' button, the info box would be placed inside the article.