Interspire Product Knowledge Base

Would you like to...

Print this page Print this page

Email this page Email this page

Post a comment Post a comment

Subscribe me

Add to favorites Add to favorites

Remove Highlighting Remove Highlighting

Edit this Article

Export to PDF

User Opinions (136 votes)

96% thumbs up 3% thumbs down

How would you rate this answer?



Thank you for rating this answer.

The Template File Structure

The Template File Structure

Templates are available from the templates folder which is inside the application folder. Here you will find a list of folders for all of the templates available in your system. Inside each template folder is a list of files and folders that look like this:

  • Backup
    This is where backups are automatically saved when you edit a template file from within the control panel
  • Images
    Images for this template are stored here. You should save any images you wish to include in this folder.
  • Panels
    All Panel files are located here. See below for an explanation on Panel files.
    • Snippets
      Inside the Panels folder is a Snippets folder. All Snippets are located here. Snippets are explained further below.
  • Previews
    The Image preview used inside the control panel for each template is stored in this folder.
  • Styles
    The CSS files used inside the template are located here. Details on the different stylesheets found in this folder are below.

Layout, Panel and Snippet files

Every file in the template system is a Layout file, a Panel file or a Snippet. The template system contains only HTML code and placeholders which identify another file to be included. A placeholder starts and ends with %%. For example: %%Panel.PageHeader%% See the placeholders section for more information. There is a diagram below that shows visually how these template files are used to construct a page.

Layout files

A Layout file generally contains the overall structure of the web page in question. It generally includes a number of Panel files. All Layout files are located in the root of the template folder.  It will contain the HTML head section, and the basic structure of the document, with placeholders marking out where panels are to be positioned. Each layout file is used for a different section on the website. For example, the Articles.html file is used when viewing an article while the Categories.html file is used when viewing a category or sub-category.

Layouts are available set for each of the web site (such as home page, articles page, etc), however pages and categories can use alternate template files. This option is available in the control panel when creating or editing a page or category. The option will display either the Pages.html or Categories.html file in addition to any new layout files you have placed in the template folder. This allows you to make template changes on a per page or per category basis.

The default layout files available in all tempaltes are:
  • Articles.html
    This layout file holds the layout of how articles are displayed and is used when an article is being read.
  • Authors.html
    This is the layout file for the author page and is used when viewing an author's details.
  • Blogs.html
    This layout file corresponds to viewing a blog entry.
  • Categories.html
    When clicking on a category, this is the layout file that's displayed.
  • Default.html
    This is the home page layout file. It's the layout file used when first visiting your website. This is the first file you'd usually edit when starting your customization.
  • Maintenance.html
    This layout file is used whenever you select the "down for maintenance" option in your control panel. You don't need to customize this file.
  • News.html
    This is the layout file that's used when viewing a news item.
  • Other.html
    This layout file is used for the 'template wrapping' feature. See below for more information.
  • Pages.html
    Whenever a web pag" is created in the application, it uses this layout file.
  • Search.html
    This is the layout file used when visitors perform a search on your web site.
Panel files

A panel file is used to indicate a block or section of the web page. A panel generally includes snippets for any repeated section of code (such as a list of articles), and may even include other panel files. A panel file is included inside a layout file or another panel file by using the placeholder %%Panel.PanelName%% where PanelName is the name of the file located inside the "Panels" folder followed by .html. For example, %%Panel.PageHeader%% indicates that the file /templates/templatename/Panels/PageHeader.html will be loaded in place of that placeholder.

Panels are unique in that they can have an associated PHP file. Most panel files will have this file, though it is not required. The PHP files are located in the /includes/display/ folder. The PHP file will share the exact same name with the exception of the extension. For example; /includes/display/PageHeader.php is used with /templates/templatename/Panels/PageHeader.html. The PHP will often retrieve dynamic information from the database and set up the placeholders for the template file. PHP panel files are responsible for setting up the GLOBAL and SNIPPET placeholders used with the .html panel files. Here is an example:

Code from the /includes/display/PageHeader.php

$GLOBALS['MyPlaceholder'] = "This is some <b>text</b> to show";

Code from /templates/templatename/Panels/PageHeader.html

%%GLOBAL_MyPlaceholder%%

The resulting output is:

This is some text to show

Snippets

A Snippet is a recurring piece of HTML or sometimes a small section of HTML that may not show up depending on the application settings (e.g. ratings for articles). It is used by the server side PHP code for recurring items such as a list. (eg.<li>Category Name</li>) A snippet can also include another snippet. Snippets are located inside the /templates/templatename/Panels/Snippets folder and are included using the %%SNIPPET_SnippetName%% where SnippetName is the name of the file. For example, %%SNIPPET_MenuLinks%% indicates that the file /templates/templatename/Panels/Snippets/MenuLinks.html will be loaded.


This diagram explains how layout files, panels and snippets work together to create a web page.



This is an example of a Layout file (Default.html, gray) loading a panel (RecentNewsPanel.html, red) which in turn loads a snippet (NewsList_Recent.html, blue) multiple times.

Related Articles

No related articles were found.

Attachments

No attachments were found.

Powered by Interspire Knowledge Manager - World's #1 Best Selling FAQ and Knowledge Base Software