Gizmo uses a very simple template system. In most case you can
- Create HTML templates in 3rd party software such as Dreamweaver or, the YUI Grids Builder, for example.
- Save the new templates with a '.tpl.php' extension in stead of .html/.htm in the /templates/html/MyTemplates folder.
- 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):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html lang="<?php echo $langauge ?>">
<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
<?php echo $head ?>
<!-- This turns the current path into CSS classes to make Page specific CSS easier. -->
<body class="<?php echo $fs->pathCSS() ?>">
<!-- Site title, good for SEO if between <H1> tags -->
<a href="<?php echo $home ?>"><?php echo $title ?></a>
<!-- 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 ?>
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):
Alternatively you can just edit/replace the files in /templates/html/default.
In the /templates/html folder that comes with Gizmo as standard you should see two example templates:
- 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.)
- 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:
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.
- 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.
make a 'css' folder in your templates folder and any .css file will be picked up automatically and included in all templates.
You guessed it, just make a 'js' folder and all .js files will be included...YAY!
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
- The current URL path of the current content.
- 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.
- 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.
- The language of the content as a two letter code (ISO 639).
- Forma of the content that has been requested. This is usually ether 'html' or 'xhtml'
- The version of the format. See 'format' above.
- The File System (FS) object. This is made available so you can have custom queries to the content or any of Gizmos API
- The version number of gizmo