A template system is an important feature in any CMS. It lets designers modify the output of built in scripts giving them much more control over the look and feel of the front end HTML. OmCore has an extensive and powerful templating system making it possible to modify almost every aspect of the HTML which is output to a visitor’s browser.
OmCore uses Twig as its template language of choice because it’s fast, simple and flexible. At a basic level, Twig is a very simple programming language specifically tailored towards building HTML pages. Designers place special tags in their HTML structure which get replaced with content from the database when the page is presented to a visitor. Twig also gives the designer control over basic flow structures such as loops and if statements as well as include files, string handling functions and automatic output escaping. We recommend that anybody using OmCore’s templating system first reads over Twig for Template Designers to get a basic understanding of how the language works. Don’t worry if you don’t understand everything in the document, if you’re competent with HTML you should be able to modify the pre-built templates supplied with the system to fit your needs.
The templates in OmCore fall into one of two categories, site templates or module templates. Site templates are used to structure and style the overall look of the page. Module templates control the HTML output of content types in the system, e.g. news teasers, block quotes, product listing.
All template files end in the extension .twig.html e.g. index.twig.html
Site templates
OmCore uses a template based system for managing the overall appearance of a website. A system can consist of multiple templates and these can be assigned to different sites or pages within the CMS. For example, as well as a 'default' template, for the majority of pages within your website, you may wish to have a sub-section with a different appearance. This would be achieved by creating a 2nd template and assigning it to the sub-section.
FTP access
Site templates are managed using FTP (File Transfer Protocol). To manage templates OmCore must provide you with an FTP account. This FTP account gives direct access to the templates directory.
The location of this directory within the file structure, relative to the root, is /assets/templates/
File structure
Templates consist of a combination of Twig templates, JavaScript, CSS, and image files (*.gif, *.jpg, and *.png). The files for each template should be contained within a sub-directory. E.g.
/my-template/
All files, bar the template file (see below), can be managed as you see fit, and stored within sub-directories of the template's sub-directory. E.g.
/my-template/js/default.js
File paths
All templates are stored within a templates directory located in /assets/templates/. Therefore all references to files need to be prefixed with /assets/templates/ and be followed by the template's directory. E.g.
/assets/templates/my-template/images/logo.gif
/assets/templates/my-template/css/default.css
To simplify things when building sites there is a handy template variable (template.path) which you can use which takes care of working out what file path to use. E.g.
<img src="{{ template.path }}images/rose.jpg" />
will become the following when output to the browser
<img src="/assets/templates/my-template/images/rose.jpg" />
The template file (index.twig.html)
When OmCore loads a template it looks for a file called index.twig.html within the root of the template's sub-directory, i.e. /my-template/index.twig.html. This file contains the HTML structure of your template, including the head tags. It is loaded by OmCore when the website is generated, and is responsible for outputting the different content areas specified in your page structure. You are free to structure the HTML in the file as you wish, as well as including other template files using Twig and supplying whatever doctype you require.
Template variables
There are many template variables and methods which can be used in the templates to customise your site, ranging from displaying navigation menus to breadcrumb paths. For example you could add a title at the top of each page using the following code:
<h1>{{ page.title }}</h1>
For more information on how variables work and the variables available see the site template variable reference.
Javascript frameworks
OmCore makes use of the Prototype javascript framework (along with the Scriptaculous library for animation) throughout it’s modules to provide advanced functionality for front-end features. If you wish to use the jQuery framework within your site template you’ll need to ensure it’s placed into no conflict mode otherwise it can cause issues with the default functionality of the system (e.g the randomiser content type wont animate, the lightbox popup wont work in products). More information on how to use jQuery alongside other libraries can be found in the jQuery documentation.