Newscoop 4 Cookbook

Newscoop and HTML5

The big challenge for web publishing today is the migration of sites to the HTML5 and CSS3 standards. Fortunately, Newscoop is HTML5 ready.

Other content management systems rely on HTML code provided by third-party widgets, modules or plugins. Changing the HTML output of these external modules often requires digging into their code. In Newscoop, because of the strict separation of business logic and presentation logic in the template engine, you have total control over HTML5 and CSS3 template output.

Below, we introduce a few examples of HTML5 / CSS3 in Newscoop templates to illustrate the ease of implementation of HTML5 features.

HTML metatags and header information

A typical HTML5 header in Newscoop would start like this:

<!DOCTYPE html>  <html lang="{{ $gimme->language->code }}">   <head>    <meta charset="utf-8" />     <meta name="description" content="{{ $siteinfo.description }}" />      <meta name="keywords" content="{{ if $gimme->article->keywords }}                                    {{ $gimme->article->keywords }},                                   {{ /if }}                                  {{ $siteinfo.keywords }}" />      <title>{{ $gimme->publication->name }}</title>     <link rel="stylesheet" href="screen.css" media="all" />   </head> 

{{ $siteinfo.description }} is the global variable which holds the site description specified in the Newscoop administration interface.

{{ $gimme->article->keywords }} and {{ $siteinfo.keywords }} are two ways to include meta tag keywords. In Newscoop, an individual article can have its own keywords specified. If that's the case, the meta tag for keywords will be filled with these article specific keywords. Otherwise, only global site keywords will be used.

Finally, the site title is defined showing the name of the publication using {{$gimme->publication->name}}.

Multiple columns in HTML5

Multi-Column Layout defines new CSS properties for columns of text. Content can flow into multiple columns, with a gap between them. You can put the content in the appropriate places inside the HTML layout.

<header>    <hgroup>           <h1>{{ $gimme->article->name }}</h1>    </hgroup>    <p>By: {{ $gimme->article->author->name }}</p> </header> <div class="text1">    <p>{{ $gimme->article->lead }}</p> </div> <div class="text2" id="customCols">    <p>{{ $gimme->article->body }}</p> </div> 

Accompanied by some CSS3 styling, this piece of code is enough to divide text into columns, gaps, and even rules between columns.

.text2 {   -webkit-column-count: 2;   -moz-column-count: 2;   column-count: 2;   -webkit-column-gap: 20px;   -moz-column-gap: 20px;   column-gap: 20px;   -webkit-column-rule: 1px solid #999;   -moz-column-rule: 1px solid #999;   column-rule: 1px solid #999;   -webkit-border-radius: 10px;   -moz-border-radius: 10px;   border-radius: 10px; } 

Video and audio handling

Not only text content is HTML5 ready - Newscoop can handle media attachments in a HTML5 way. The following code shows how an audio file which has been attached to an article in the Newscoop administration interface can be handled in HTML5:

<audio controls>     <source src="{{ uri options="articleattachment" }}"              type="{{ $gimme->attachment->mime_type }}"> </audio> 

The code above displays a player for the specified audio attachment. To help the browser to determine the MIME type of the audio file, the 'type' attribute is specified, although it can be omitted. The same technique is possible for video content:

<video controls width="520" height="330">     <source src="{{ uri options="articleattachment" }}"              type="{{ $gimme->attachment->mime_type }}"> </video> 

In both cases, {{ uri options="articleattachment" }} is replaced with the audio or video file URL. With HTML5, you don't need to specify Flash players, because modern browsers have a built-in player for embedded multimedia content.