Development » Templates

Templates

Overview

One of the marvellous features of Etomite is the ability to add HTML templates and change the look of your site instantly. All you have to do is add a few pieces of Etomite code to your custom template and you're done! Sounds simple? You bet! The process is:

Note that all examples of snippet coding here have a deliberate error - an additional space as the second character (eg '[ [') so that they aren't interpreted as snippet calls!

AlexisPro Redux Example

The stock install template is “AlexisPro Redux” and will be used as a reference point for the examples below, so open it up in your text editor or Etomite manager and let's give it a lookover.

If you are familiar with HTML, you will notice that the template is almost entirely composed of familiar HTML code. The Etomite tags, in a template act as placeholders for content that will be generated dynamically. Etomite has quite a few ways to call for data and then produce the output. Looking at the “AlexisPro Redux” template, here are the various elements added to the HTML in order from top to bottom:

[ (site_name) ] » [ *pagetitle* ]
This duo prints sitename >> pagetitle into the title area of your browser.
[ [GetKeywords] ]
Produces the keywords for the meta tags.
[ (site_name) ]
Displays your site name in the top upper left.
[ [PageTrail] ]
Displays the pagetrail in the top upper right.
[ [PoweredBy] ]
Displays directly underneath the pagetrail.
[ [MenuBuilder?id=0] ]
Produces the site navigation menu.
[ *content* ]
Displays the content of your document.
MySQL: [ ^qt^ ], [ ^q^ ] request(s), PHP: [ ^p^ ], total: [ ^t^ ], document retrieved from [ ^s^ ]
This displays all that info in the bottom row.
MySQL: 0.0045 s, 16 request(s), PHP: 0.0806 s, total: 0.0851 s, document retrieved from database

Note

<style type="text/css">
@import url('assets/site/style.css');
</style>

While not an Etomite specific tag at all, it bears mentioning that what this does is include a file called “style.css” which is found in the assets/style folder. This file contains all the format information which tells the browser how you want the page to display. If you change the location of this file, make sure you have the correct path (starting from your Etomite root- where the index.php page is) or your page will print unformatted.

Dynamic Pieces Available for Templates

In the "AlexusPro Redux" example, we see many different kinds of placeholders. Here is a short explanation of each:

Snippets

[ [SnippetName] ] or [ !SnippetName! ]

Where "SnippetName" is the name of the snippet you want to run at that place in the template.

To add extra functionality to your Etomite site you use snippets. These are blocks of PHP code designed for Etomite which provide a specific function. The difference between the standard [ [Snippet] ] version and the [ !Snippet! ] version has to do with caching. This version: [ !Snippet! ] will not be cached and is best used inside pages that have caching turned on. This has some consequences which are explained in How to Write Snippets.

Settings

[ (setting) ]

Where “setting” is one of many available settings. Settings are Etomite's overall variables such as the name of the site, whether logs are on or off, what the home page is, etc. A list of settings can be found in the Etomite database inside the table “prefix_system_settings”.

Document Attributes

[ *attribute* ]

Where “attribute” is one of the many document attributes available. Attributes are document specific pieces of data. These attributes are contained in “prefix_site_content” table of the database.

More info:

Chunks

{ {ChunkName} }

Where "ChunkName" is the name of the chunk to be inserted. Chunks are the HTML version of a snippet. For pieces of code that you will reuse a lot, use a chunk for easier maintenance.

More info:

Notice where these pieces of code are used in the template, and then look at the template in your browser. This will give you an idea of where to place these items in your template.

Publishing Your Templates

After adding the needed elements to your template should be ready to test it so fire up your Etomite manager.

  1. Click “manage resources”.
  2. Now click “new template”.
  3. Give your new template a name, and a brief description.
  4. Copy and paste the new template from your text editor into the textarea.
  5. Click “save”.

To be able to view your new template we must now assign a document to use the template. Just to test the template, let's create a new document.

  1. Click “new document”.
  2. Name your document.
  3. Set the document options as you see fit.
  4. Write something in the content of the document.
  5. Assign the document to use the new template.
  6. Click “save”.

If everything went ok, you should now see your new template with whatever you just wrote in the document displayed in the content preview area. There's your new template!

Other Resources

HTML Language – The core language for your page template.

CSS – Because it's all about style

Good Overall Variety

Etomite Specific Templates
– because all templating systems are not created equal