Templates

Gizmo uses a very simple template system. In most case you can

  1. Create HTML templates in 3rd party software such as Dreamweaver or, the YUI Grids Builder, for example.
  2. Save the new templates with a '.tpl.php' extension in stead of .html/.htm in the /templates/html/MyTemplates folder.
  3. Copy and past a few PHP variables so Gizmo knows where to put the content in your template (see example Index bellow).

Its usually not much more than that!

Bellow is the most basic example of what the Savant3 template code can look like. (Note: This is also an example of what PHP code will look like if you put it in the /content folder):

index

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html lang="<?php echo $langauge ?>">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHAR_ENCODING ?>">
    <meta name="generator" content="Web Gizmo <?php echo $gizmo_version ?>">
    
    <title><?php echo $title ?></title>
    
    <!-- IMPORTANT! This is always required between the <HEAD> tags. Plugins 
        use this to put references to CSS and Javascript files as they need them -->
    <?php echo $head ?>
    
</head>

        <!-- This turns the current path into CSS classes to make Page specific CSS easier. -->
<body class="<?php echo $fs->pathCSS() ?>">
    
    <h1>
        <!-- Site title, good for SEO if between <H1> tags -->
        <a href="<?php echo $home ?>"><?php echo $title ?></a>
    </h1>
    
    <!-- This is the Menu, a list of links to the top level of folders the ul() 
        makes it an HTML <UL> with a class = 'Menu' (for CSS styling). -->
    <?php echo ul($fs->menu(), 'Menu'?>
    
    
    <!-- The main contents of the current folder comes out here. -->
    <?php echo $content ?>
    
    
    <!-- This is also always required, juts before the final </BODY> tag. -->
    <?php echo $foot ?>
    
</body>
</html>

Where does Gizmo look for templates?

Gizmo looks for templates in the /templates/html/MyTemplaes folder, where MyTemplaes can be any name you want. You tell Gizmo which set of templates to use by putting the following line in your /index.php file (changing MyTemplaes to whatever you like):

define('THEME_DIR', '/MyTemplaes');

Alternatively you can just edit/replace the files in /templates/html/default.

Template examples

In the /templates/html folder that comes with Gizmo as standard you should see two example templates:

/default
most basic/minimal template. Gizmo will fall back to this if it can't find the template defined by THEME_DIR (defined in your sites index.php file.)
/yui
Example template using the Yahoo YUI Grids CSS framework. Made in 10 minutes with the help of their Grids Builder.

Template lookup order

Suppose you have a page under your /content folder that looks like this: /content/something/product/car

To see this on we website you would go to: www.example.com/something/product/car

Gizmo see the folders like a hierarchy and uses this hierarchy when looking up the template for this page. You might think of the folder hierarchy as such:

\something
    \product
        \car

For this path Gizmo looks for the following templates in this order starting at the top:

  1. somthing_product_car.tpl.php
  2. product_car.tpl.php
  3. car.tpl.php
  4. car_default.tpl.php
  5. product_default.tpl.php
  6. something_default.tpl.php
  7. index.tpl.php

Here index.tpl.php is the global default and is used when none of the other template names (above it in the list) are found and should always be present.

Templates ending with _default.tpl.php are inherited by all sub-folders. This means if only 'product_default.tpl.php' where in the templates folder

Placing tag content

Gizmo picks up tag content, that is files which have a Tag in there name. That is at the beginning of the file name there is a word with underscores '_' on ether side of it. For example:

_tag_nice_name.text

_left_hello.jpg

_quotes_recordings.mov

here "tag", "left" and "quotes" are the tags that gizmo would pick up for each of these files respectively.

These will not be rendered as part of the normal content. Instead to make them appear in your template you simply insert the following where you would like to see them (each example above):

<?php echo @$tag ?>

<?php echo @$left ?>

<?php echo @$quotes ?>

The '@' sign is to avoid PHP making an nasty error in the case of no tagged content with that name being present in the current content folder.

Designer short cuts: Drag & Drop design

The templates folder offers some convenience including of files if you put them in the right place.

Fonts
Place an unzipped folder from one of Font Squirrel's prepackaged @font-face kits in a folder called 'fonts' and the style sheet that comes with every FontSquirrel web package will automatically be included so you can just reference it in your CSS.

e.g.

web_root/templates/html/myTemplate/fonts/CrAzY_font
CSS

make a 'css' folder in your templates folder and any .css file will be picked up automatically and included in all templates.

web_root/templates/html/myTemplate/css/myStyle.css

Javascript

You guessed it, just make a 'js' folder and all .js files will be included...YAY!

web_root/templates/html/myTemplate/js/less.min.js

Template variables

The following variables are available to all templates and can be used like so:

<?php echo $variable_name ?>

where "variable_name" is the name of one of the following variables:

Useful URL paths

here
The current URL path of the current content.
home
URL path to the start page. This takes into consideration the base path if Gizmo is not in the root (i.e. "/") of the domain and the 'DEFAULT_START' global variable which can be set in the index.php file.
templates
URL path to the current templates folder. Handy if you want to include CSS, Javascript, images etc

Site information

title
The title of the webpage as defined by the 'SITE_TITLE' global variable. Which defaults to the domain name if not set in the index.php file.
language
The language of the content as a two letter code (ISO 639).
format
Forma of the content that has been requested. This is usually ether 'html' or 'xhtml'
formatVersion
The version of the format. See 'format' above.

Gizmo stuff

fs
The File System (FS) object. This is made available so you can have custom queries to the content or any of Gizmos API
gizmo_version
The version number of gizmo