Newscoop 4.3 Cookbook
Your first Newscoop theme
If you're a designer who is new to the Newscoop or Smarty way of making web pages, or you've been trained on GUI-based web development tools, the trend towards template-driven design might seem intimidating. Perhaps you don't have a computer science background, and now you're being expected to understand programming as well as design. Fear not, because Newscoop's template language is just as simple as HTML, and you'll find it a huge time-saver once you have grasped the basics. No longer will you be forced to adopt ready-made themes for your next content management system deployment, or worse still, have to dive into unfamiliar code to make the adaptations your client requires.
To prove just how simple Newscoop publication design can be, take a look at this theme, The Stun, available for free download under the GNU GPLv3 license from: https://github.com/newscoop/theme-TheStun/releases/download/v1.3/theme-TheStun.zip
This theme is also available on GitHub at https://github.com/newscoop/theme-TheStun for examination and forking. (Please note that the 'Download this repository as a zip file' button on GitHub exports Newscoop theme files within a folder, whereas a working Newscoop theme should have its main template files in the zip file root. See the Cookbook chapter 'Creating a Newscoop theme' for details of the proper file structure).
The Stun theme contains just two CSS files (one for design, one for fonts) and the bare minimum of features needed to display the front page, sections and articles of your publication. The design of The Stun is by Pete Bradley, former News International page designer.
The idea behind this theme is to make it easier for new designers to learn how a Newscoop theme works, compared to looking at the code of full-feature themes like New Custodian or Rockstar. It also contains an example of how to use a web font from http://www.fontsquirrel.com in a Newscoop theme. Finally, news designers are freed from the stultifying tyranny of web-safe fonts!
Let's take a look at The Stun's front page template, front.tpl - just 33 lines of code plus whitespace, and the biggest block of that code is for creating the list of article authors with the proper punctuation (given that we can't guess how many authors there might be for a dynamically generated article).
This template starts by including _header.tpl from the _tpl folder of sub-templates (there are just three sub-templates in The Stun). Thanks to this sub-template we don't have to deal with the <HEAD> element of HTML, open a <BODY> tag, fiddle with the masthead or deal with navigation buttons. It's all taken care of, so we can focus on front page design.
{{ include file='_tpl/_header.tpl' }}
Next, we'll list articles from the "Front page" featured article playlist, a sequence of the day's most significant stories which has been created by the newspaper's editor in the Newscoop administration interface. All we have to do is tell Newscoop to list the article that the editor has made the top item in this particular playlist, by using a list length of "1":
{{ list_playlist_articles name="Front page" length="1" }}
The next part of the code is for the article headline, which we put in a <div> because we want to style it with CSS. The id of this div should make its function pretty obvious when we are editing the general.css file, found in the _css folder.
<div id="frontpage-headline">
<a href="{{ uri options="article" }}"><h1>{{ $gimme->article->name }}</h1></a>
</div>
See how we're using two sets of curly brackets on the line above? Within the element created by the <h1> and </h1> tags we are asking Newscoop for the article name to create our headline, which could be any line of text the editor wants to put there at that moment. We're also wrapping the <h1> element with an <a> element, but this time we're using the curly brackets to get the URI of this article. So we now have a styled headline, and a link to the article inside the publication.
Typically we may wish to provide a shortened version of the story on the front page, and give the full article a different design treatment. This is very easy to do in Newscoop since we have a separate template for full articles, by default called article.tpl (although you can call this file anything you want). There is also a template for listing articles in the sections that the editor has created, such as Politics or Sports. The section template is called section.tpl by default, and just as with front.tpl or article.tpl you can re-use the header, footer or any other sub-template that you have created. You'll soon appreciate how much maintenance time is saved by the efficiency of this approach.
In The Stun, 404.tpl is an empty file. You can put any message to readers that you want in this template, but with an empty 404 template Newscoop will re-direct all requests for non-existent pages to the publication front page, which may be what you wanted anyway.
We hope you have fun playing with The Stun, and if you create new versions of it, please let us take a look at what you've come up with!