Who, what, when, where and why

Football live reporting. Be ready in time for UEFA Euro 2012.

With the UEFA Euro 2012 coming up, the interest in football (soccer to some) is at an all time high here in our Berlin and Prague offices. To combine this enthusiasm with the one I have for Newscoop, I spent a few hours putting a template together for live football coverage and called it "Football Live Lite".

"Football Live Lite" creates nicely formatted tables, illustrating the game's progress. Using the Newscoop backend, the journalist can concentrate on following the game and does not need to worry about formatting. In this post you find a download link for all necessary files (one template and five images) as well as a screencast and written tutorial for journalists.

Being from Germany, I am used to a certain format of live coverage of games, which you can find in most major newspapers and magazines like Spiegel, Süddeutsche Zeitung or broadcasters like Sport1.

To those who want to know more about Newscoop, you will learn how to make best use of the powers that our template engine holds under the hood.

User Guide for Editors

"Football Live Lite" is designed to make it easier for editors to create a live commentary of a football game. Lets start with a simple example. The live reporting opens with "Welcome to the Berlin vs. Prague office tournament." before the game starts.

While the front end shows a well formatted table, the journalist does not need to do any formatting. The above line is automatically generated by typing into the Newscoop editor:

[ #cWelcome to the Berlin vs. Prague office tournament.# ]

Here is a view on the backend editor that the reporter is working with for quick commentary.

As the game goes on, the reporter can quickly add commentary line by line. A small number of special characters will automatically be converted by Newscoop into a fancy looking table, including icons for goals, referee's whistle, red and yellow card as well as substitutions. Pressing "Save" after each line will immediately update the live page and add your latest comment.

These are the basic elements for each line:

• [ starts a line of live commentary
• ] closes a line of live commentary
• #t# contains the time, e.g. 88 or 88:35 if you want to show seconds, too. Write the time right after the T.
• #i# is the icon column with an optional icon for goal, substitution, whistle, yellow or red card. Write the icon placeholder right after the I.
• #c# is the commentary itself. Write the comment directly after the C.

An example, showing time and the goal icon looks like this:

[ #t16:20# #i_g# #cGoal! Gideon Lehmann scores for Berlin.# ]

What happens: 16 min and 20 sec into the game (#t16:20#) we are displaying the goal icon (#i_g#) because there was one (#cGoal...#). (Note that there is no spacing between the #t, #i and #c and the following information.) 

To your audience, the line looks like this:

Here are some more examples:

1. [ #cComment# ] - will write: "Comment"
2. [ #t12# #cComment# ] - will write: "12  Comment"
3. [ #t# #i_w# #cKick off# ] - will write "WhislteIcon  Kick off"
4. [ #t12# #i_g# #cGoal# ] - will write "12  GoalIcon  Goal"

Looks complicated at first, but after a few minutes it will really speed up your writing.

You can use the following icons for events in the game. (If you need more or different ones, ask your developer or read the section on installation and development below.)

• _g = goal
• _s = substitution
• _y = yellow card
• _r = red card
• _w = whistle (kick off, half time, etc.)

You can also add formatting (bold, italics) in the commentary, using the WYSIWYG editor, as well as add links, images and anything else Newscoop allows.

Important: if you want to create an empty line, you have to use line breaks by holding the Shift-Key pressed down and then press Enter. The paragraph breaks are automatically being stripped out in this template to keep the design intact.

Installation

“Football Live Lite” consists of one template file (called article-footballlivelite.tpl) and five icons. The following installation refers to using the template for all articles in a specific section – in this case “Sports” with section number 60. Adjust this to your needs, e.g. connect it with a specific switch, keyword or article type. Refer to the Newscoop Cookbook for more information.

1. Download "Football Live Lite"

Here you can download a zip archive containing all files for "Football Live Lite".

2. Upload files

article-footballlivelite.tpl goes into the folder _tpl of the active theme

ticker_goal.png, ticker_red.png, ticker_substitution.png, ticker_whistle.png, ticker_yellow.png go into the folder _img of the active theme

3. Change article.tpl to call Football Live Lite template in Sport section

Open article.tpl in the template editor.

Change the line {{ include file="_tpl/article-cont.tpl" }} to:

{{ if $gimme->section->number == 60 }}{{ include file="_tpl/article-footballlivelite.tpl" }}

{{ else }}{{ include file="_tpl/article-cont.tpl" }}

{{ /if }}

Done.

Customisation and Development

Inside the template you find the CSS which structures the look and feel of the commentary table. The icons are displayed as background images.

The heart of the template is the print of the content of the article. As you can see, the simple Newscoop print command {{ $gimme->article->full_text }} has been extended using Smarty functions:

(Note: in order to work, this needs to be in one long line, no line breaks. I added them only to make it easier to read.)

If you stack them up like this, they are carried out one after the other. In this case, the empty icon command #I will only be replaced AFTER all instances of #I with icons have been replaced.

The two functions used are “replace” which works like PHP str_replace. The last two replacements are done with regular expressions to make sure the script catches all paragraph breaks, no matter what classes are in the opening tag and to make it case insensitive. The function regex_replace works like PHP preg_replace.

This is where you can add more icons if you want. In fact, you can write your own templates for different use cases. If you do, please let me know in the comments. I am always interested to learn new tricks.