Templates - The foundation of web-based CMS content

Templating is probably one of the most crucial areas that you must evaluate when choosing a Content Management System. How the templating works will have a dramatic affect on the implementation of your system and ongoing branding requirement.

We believe that Contensis has one of the best templating engines in the industry - and we will endeavour to show you why.

The Template Framework

 

 

Template editing can be carried out directly through the CMS WYSIWYG interface. Creating a template is as simple as copying and pasting the relevant HTML source code into the system and then adding extra components to it, such as placeholders.

Template creation tools Adobe InDesign, Adobe Illustrator, Adobe Photoshop, Paint .NET, Paint Shop Pro
Some of the tools you may initially use to develop your templates.

Typically a design will start its life in a tool such as Photoshop, Fireworks or InDesign. The next phase is to actually cut the template into HTML and CSS. Normally this would be done for every variation of the template and it can still be done in this way, but the templating engine in Contensis allows us to improve the implementation times by providing a 'componentised' approach to templates.

The first step will normally be to identify the common elements of the template, which normally consists of a footer, header and main content section. This is what we would call the Base Template and this is what we would first create in the system. Utilising the sub- template functionality, we may make this template from a separate footer, header and content template or we could create it as a single entity - it just depends on the scenario.

Once the Base Template is created, we can then start building on this by creating a range of variation. Normally we would construct the other layouts, what we call Framework Templates, such as a two column or three column layout, for example. At this stage we will probably also start adding elements such as localised text if we are working on a multilingual site, menus and breadcrumbs.

HTML Creation Tools - Use the tools you want
HTML Creation Tools - Use the tools you want

Because templates can be created by dragging and dropping other templates into each other, you will never be in the situation of having to update the footer on each of the different page templates again - a single source of change is all that is required.

We have actually done real-world tests with our in-house professional services department, with the same person creating a template in the traditional way and the Contensis way, and found that we can reduce implementation times by up to 40%.

Obviously if you prefer to have completely separate HTML and disconnected templates for each page type, then this is still just as easy. The choice is yours.

Because the templates are content in Contensis, just like the CSS, you have all the standard benefits of the system, including full versioning, auditing and workflow. As a template developer, once you are happy with your template you can simply submit it for approval, and once approved the template will then publish to the live site, and update every page that uses it.

As templates are standard content you also have the ability to set publishing schedules on templates, so you may like to push the new site look-and-feel live on Friday at 8pm after you have gone home!

Separating the design and presentation from the content is extremely important in today’s Multi Channel world.

The template engine allows you to achieve this separation successfully by allowing unlimited numbers of placeholders, so you can easily split the content from the template.

This screenshot shows a typical Style Guide Prose, provided by a design agency
This screenshot shows a typical Style Guide Prose, provided by a design agency

It is also usual to restrict the buttons and styling options available to the user and instead carefully style the different elements of a page, so a user can simply select a Paragraph or a heading and the content will style automatically without having to assign a dozen CSS classes.

We have provided an example of a screenshot from the creation of the University Of Wales site which demonstrates a sample set of prose which has been implemented into the templates.

Although we have many tools available in the WYSIWYG editor so we can tick boxes in tenders and proposals, in most scenarios, if the design and CSS is created properly, many of these can be turned off with no effect other than allowing your users to create beautifully created content with very little effort.

Fine Placeholder Control

When template creators insert placeholders into a template they have a wide range of options available to control how the placeholder will behave and what the user can do within it. This functionality is very important when aiming to keep a standard corporate look-and-feel.

Standard placeholder options include

 
  • Text Only - Only text can be placed within the placeholder; no other HTML such as headings, for example.
  • Max Length - This option allows you to determine the maximum number of characters that a user can enter in the placeholder.
  • Constrain Images - This option allows you to specify maximum width and heights that images can be inserted at into the placeholder.
  • Content Types - This option allows you to specify exactly what type of content can be inserted into a placeholder - if you don't want images to be inserted, just un-tick them.
  • Can Change Styles - This option specifies whether a user can utilise the CSS, heading and paragraph options to apply style to the text content.
  • Tag To Render - Allows you to specify what HTML tag will render around the content, or no tag at all
  • CSS Class - Allows you to specify a CSS class against the placeholder

 


 

This screenshot shows a sub template used on this site to create the image with caption boxes.

This screenshot shows a sub-template used on this site to create the image with caption boxes. Inserting a sub-template is just a case of dragging and dropping the relevant component.

Sub-Templates or Mini Templates, as some customers like to call them, allow you to create pages and templates from a pre-created set of building blocks.

Many of our competitors offer snippets to achieve this functionality. The problem with this is that the presentation gets stuck in the content and when you come to completely re-brand the entire site it becomes near impossible,

Please take a look at the Case Study on re-branding the Southampton Solent University website to see template re-branding in full swing. Changing your templates must be easy - let’s face it, the site will be re-designed sooner or later!

CSS is an integral part of any template implementation. CSS can be assigned to templates by default or forced to appear wherever the template is used. On top of this you can also change the CSS at section or sub-section level - you may, for instance, have different colour schemes for each part of the site. This is simple to achieve just create the different variations and then assign them to the sections as relevant.

You may wish to change the style sheets based upon user input or for personalisation or browser compliance. We offer a simple set of methods to change the style sheets at runtime, if you want to programmatically change the CSS assignment based upon anything you deem relevant.

All types of style sheet Media are supported including, for example, print style sheets.

If you are using our .Net publishing method, then it is possible to write .Net code directly into the templates which either calls your own bespoke components or assemblies or calls our Open API or the standard Microsoft .net framework.

There are many reasons why having the ability to change execute code at runtime is important. An example may be that you wish to show or hide a component on the homepage of the site based upon a user's role.

This screenshot shows an example of custom code in the template editor, an element is being shown or hidden based upon group membership  
A custom code example hiding or showing an element in the template based upon group membership.

The above example is very straightforward, but it just shows that any .Net code can be executed that you choose - in this case we are calling the Page API to personalise based upon the user's group membership. For those of you who are concerned that the name of the group may change, you can also pass in the group ID (the above example ID is for illustration purposes only).

If you are a Contensis customer then you can get a whole host of custom code examples on our Support Website.

 


Support articles

Setting up the QA module

Description
This article is a 'Getting Started' guide for the QA module in R7
Type
Web Page

Upgrading to R7

Description
This page should be referred to when planning the upgrade from R6 to R7
Type
Web Page
Online support services require a login
X close
Call us +44(0)1584 824202
Support-Website-Link
Submit-a-Ticket