VROOM Templates

Templates control the layout of pages. They are an integral part of the Halogy architecture and can be completely customized with your own HTML markup. Templates can be created for each page individually (e.g. Home, About), or can be shared by multiple pages and contain varying layouts (e.g. 2 Column, 3 Column, etc.).

Templates can contain static markup (e.g. a simple imported HTML file), tags for dynamic areas (such as editable regions), Includes (snippets of code which are re-used) or mixture of all three. Templates are also used for the modules such as Blog and Shop, and they too can be completely customized.

Creating and Using Templates

A template can be created and edited from within the administration portal providing the administrator has the correct permissions. To add a template simply click on Templates, then Add Template. The template must have a name, and also contain some HTML markup in the body. Once you have created a template you can then select it when you edit pages.

Below is an example of a template using a mixture of static content, includes and some editable regions (blocks).

NOTE: The spaces in the Include tag would have to be removed.

{ include:header }


<div class="columns">
    <div class="col1">
    <div class="col2">

{ include:footer }

Conditional Statements

The template engine contains basic logical statements such as if and else. This can be useful if you want to check that a tag exists before outputting it. You can also use boolean tags such as {logged-in} which will check whether the user is logged in, or {mobile} to check whether the browser is a mobile browser.

Conditional statements used in conjunction with Includes can make the templating engine very powerful indeed as you could include different Include files based on whether the browser is a mobile browser, or whether the request is AJAX. For example, the code below is a header include used in every single template:

NOTE: Spaces would have to be removed from the tags when using the example below:

{ if mobile }
    { include:header-mobile }
{ else }
    { include:header-default }
{ /if }