Campsite is HTML5 / CSS3 ready
The big challenge for CMS web publishing today is the migration of sites to HTML5 and CSS3. Where other CMS systems struggle to clean up their code and alter their skins and templates, Campsite is HTML5 ready out of the box. The key to Campsite’s flexibility is our enterprise level templating engine. Becuase of the strict separation of layout and data, the HTML displayed on your site is entirely under your control.
Below we introduce a few examples of HTML5 / CSS3 and Campsite templating to illustrate the easy implementation of HTML5 features.
HTML metatags and header information
A typical HTML5 header in Campsite would start like this:
{{$campsite->publication->name}}
You can see how easily the Campsite information can be placed inside the HTML document. The Campsite templating engine is built on top of Smarty and all variables and commands are inside {{ these brackets }}.
{{$siteinfo.description}} is the global variable which holds the site description specified in the admin area.
{{$campsite->article->keywords}} and {{$siteinfo.keywords}}: In Campsite, every article can have keywords specified. If that’s the case, meta tag for keywords will be filled with these article keywords, otherwise only global site keywords will be used. That’s what this code snippet screams.
Finally, the site title is defined showing the name of the publication using {{$campsite->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, and optionally a rule, between them. In our example, Campsite templating lingo picks the latest news article from our live site using following two or three lines of code
{{ local }}
{{ set_section number="35" }}
{{ list_articles length="1" order="bypublishdate desc" }}
Now we place the content in the appropriate places inside the HTML layout. The Campsite tags speak for themselves. "name" and "author->name" are default variables in the admin interface, "lead" and "body" are elements of the article.
{{ $campsite->article->name }}
By: {{ $campsite->article->author->name }}
{{ $campsite->article->lead }}
{{ $campsite->article->body }}
The link below shows a live example taken from html5rocks. For demonstration purpose, you can change the number of columns.
http://www.sourcefabric.org/en/home/stories/?tpl=621
Video and audio handling
Not only text content is HTML5 ready - Campsite can handle article attachments in a HTML5 way. The following code shows how an audio or video file which has been attached to an article in the admin interface of Campsite will be displayed in HTML5:What this does is showing the player to play specified article audio attachment. To help the browser to determine the type of the audio file, ‘type’ attribute is specified, although it can be omitted.
The same is possible for video content:
In both cases, {{ uri options="articleattachment" }} is replaced with the audio or video file url.
The following live example (also taken from from html5rocks) uses HTML5’s new ‘video’ container, simply inserts video file on the web page without the need for flash video player. Changing the length parameter in the campsite language allows to list more than one video.
http://www.sourcefabric.org/en/home/stories/?tpl=622
This example (source code also taken from html5rocks.com), using HTML5’s new ‘video’ container, simply inserts video file on the web page without the need for flash video player.
{{ set_article number="91" }}
{{ list_article_attachments length="1" }}
Your browser does not support the video tag. :(
Learn more about templating with Campsite here:
http://en.flossmanuals.net/Campsite/CreatingTemplatesForYourPublication