Templates | Halogy User Guide

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.

Table of Contents


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 }

<h1>{page:title}</h1>

<div class="columns">
    <div class="col1">
        {block1}
    </div>
    <div class="col2">
        {block2}
    </div>
</div>

{ include:footer }

Includes

Includes are snippets or code that can be re-used. Most commonly they are used as header and footer for templates so that this common code (e.g. the Doctype and copyright information) doesn't have to be used in every single template that you create. Another advantage is if you want to make a change across hundreds of pages you only need to edit that one Include, providing it is referenced in the template that is shared across those pages.

To make an Include select Includes from the Templates menu in the administration portal, click Add Include, enter a reference for the include (e.g. my-header), then enter the markup for the include.

Then you simply reference that Include from your template, for example {include:my-header}. The markup you used in the Include will be produced within the template, and therefore in your pages too. Includes can also be used at block level.

Includes can be included within other includes, which makes the templating engine very powerful and useful for large sites that needs lots of re-used code.


CSS and Javascript

CSS and Javascript Files are effectively Includes as they are snippets of code which get included in a template. However accessing them requires you to link directly to them via a 'virtual path'.

First of all you can create your CSS and Javascript in the Template menu of the administrator portal. Click either CSS or Javascript from the menu, then Add CSS, create a reference with the extension (e.g. my-style.css), and then click Save Changes.

NOTE: With CSS and Javascript you must add the relevant extension (e.g. .css or .js), otherwise the system will think that the code is a regular Include.

Once you have created your CSS or Javascript you can include it as you would normally through HTML using the following path:

For CSS use: /css/REFERENCE.css
For Javascript use: /js/REFERENCE.js

An example below is taken from a header include which references both CSS and Javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>{page:title}</title>
    <link rel="stylesheet" type="text/css" href="/css/my-style.css" />
    <script type="text/javascript" src="/js/my-javascript.js"></script>
</head>
<body>

    <!-- end header -->

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 }

Importing Themes

Themes can be imported by going to the Templates page and clicking on Import Theme. The file must be a ZIP file which can include HTML, CSS, Javascript, and image files. Once a theme is imported, Templates, Includes, CSS, JS and images will get created automatically for use in your pages saving a lot of time.

More information can be found on the Themes page.