Learning Center

TypeRoom Template Tags

TypeRoom Templates have been designed to be friendly to anyone who has a basic knowledge of HTML and CSS. Along with standard HTML and CSS, templates contain a few custom tags that are used to output dynamic HTML. For instance, the "$title" tag will be replaced on each page with the title set in the Page Settings tab. Below we've explained each TypeRoom specific tag in detail. For further customization, please check out our plugin system.

{{$title}}

Maps to the Page Title set in the TypeRoom interface. When using TypeRoom's template creator, any content between the '<title></title>' tags is automatically replaced with this variable.

Code:

<title>{{$title}}</title>

Result:

<title>Our Portfolio</title>

{{$description}}

The value of the description meta tag set in the TypeRoom interface. When using TypeRoom's template creator, any content in the '<meta name="description">' tag is replaced with this variable.

Code:

<meta name="description" content="{{$description}}" />

Result:

<meta name="description" content="Web design and development company specializing custom web applications" />

{{$keywords}}

The value of the keywords meta tag set in the TypeRoom interface. When using TypeRoom's template creator, any content in the '<meta name="description">' tag is replaced with this variable.

Code:

<meta name="keywords" content="{{$keywords}}" />

Result:

<meta name="keywords" content="web design, custom e-commerce, application development" />

{{$publicPath}}

This is the sites full original domain and path to its public directory including the trailing slash.

Code:

<a href="{{$publicPath}}about">about us<a/>

Result:

<a href="http://www.site-name.com/about">about us<a/>

{{$pageName}}

The file name of the current page; everything after the final '/' in the URL.

Code:

You are currently on {{$pageName}}.

Result:

You are currently on about-us.

{{$alias}}

The value of the page alias set in the TypeRoom interface.

Code:

Old page: {{$alias}}

Result:

Old page: about-us.html

{{$remoteAssetPath}}

Points to the remote assets folder on the server TypeRoom publishes to. Useful for linking to assets you would like to manage outside of TypeRoom.

Code:

{{$remoteAssetPath}}image.jpg

Result:

/typeroom/assets/image.jpg

{{rendercontent}}

Renders a content area in the template. A Content Area is an editable region, allowing for unique content across pages that share a template.

Code:

<div>{{$rendercontent name="sidebar"}}</div>

Result:

<div>EDITABLE CONTENT AREA</div>

Details:

Parameter	Type	Default	Description
name	string	0	Set this in the case where you have multiple content areas on a page. If you have more than one they need unique names or the same one will be rendered over and over.

{{rendermenu}}

Renders a menu in the template. Menus called with this function are automatically built based on the hierarchical structure of the site.

Code:


        <div class="main-menu">{{rendermenu depth="0"}}</div>

Result:


        <div class="main-menu">

        <ul>
        <li class="listItem first cms_index" id="tr_menu_761_1761"><a href="http://www.domain.com/">Home</a></li>
        <li class="cms_about" id="tr_menu_761_1762"><a href="http://www.domain.com/about/">About</a></li>
        <li class="cms_services selected cms_services_selected" id="tr_menu_761_1763"><a class="selected" href="http://www.domain.com/services/">Services</a></li>
        <li class="last cms_contact" id="tr_menu_761_1765"><a href="http://www.domain.com/contact/">Contact</a></li>
        </ul><!-- tr_menu_761 -->

        </div>

See detailed {{rendermenu}} examples

Details:

Parameter	Type	Default	Description
depth	int	0	Refers to the menu depth. For the root menu use 0, for the first sub menu use 1 and so on. The depth can also be a page name. If you specify a page name, the menu will list all pages filed underneath that page, regardless of where in the site you are.
nested	mixed	false	Is false by default meaning sub-menus will not be displayed Setting this to true means nest sub-menus as deep as possible. Setting a number will show nested menus up to the depth you specify.
showall	bool	false	When nested is set to true, setting showall to true will force all sub-menus of all pages in a menu to be displayed. Will be ignored if nested is set to false.

Notes about styling menus:

It is recommended that the rendermenu function be wrapped in a div, to allow for flexible CSS styling
The first menu item receives the class "first", the last receives the class "last"
Each menu item receives a unique class based off of the page name, prepended with "cms_". Ex: "cms_services"
The current menu item receives the class "cms_[pagename]_selected". For instance, "cms_services_selected"
The current menu item receives the class "selected" on the A tag.
When styling horizontal menus, the LIs should be floated, not the A tags. If the A tags are floated, the drag-and-drop reorder feature will not work.

See detailed {{rendermenu}} examples

{{breadcrumbs}}

Breadcrumbs are a form of navigation showing the location of the current page and all relevant parent pages.

Code:

{{breadcrumbs separator=" / "}}

Result:

Home / Services / Web Design

Details:

Parameter	Type	Default	Description
separator	string	' / '	The separator is used between each link in the list of breadcrumbs. Include spacing in the value if you would like whitespace.

{{snippet}}

This function renders a repeating block of content. A snippet behaves similarly to {{rendercontent}} in that it can be edited using the TypeRoom Editor, but differs in that a snippet's content is repeated across all pages it is used on. A snippet can be made editable or non-editable in the Advanced Editor. By default snippets are editable.

Code:

<div class="sidebar">{{snippet name="side"}}</div>

Result:

<div class="sidebar">[EDITABLE SNIPPET HERE]</div>

Details:

Parameter	Type	Default	Description
name	string	0	REQUIRED: The name can only contain letters and numbers and is case sensitive.

{{plugin}}

Calls a custom function set by the parameter "name". For details, please see the plugin documentation.

Code:

{{plugin name="hello_word" tag="h1"}}

Result:

<h1>Hello World!</h1>

{{style_creator}}

An internal function that is used to link to the Style Creator CSS file. It will automatically be put in the <head> of imported templates. If this tag is not included, the Style Creator styles will not be displayed when using the template. There are no parameters for this function.

Code:

{{style_creator}}

Result:

<link rel="stylesheet" type="text/css" href="/typeroom/system/css/tr_styles.css" />

{{css_file}}

Prints a path to a TypeRoom managed CSS file.

Code:

{{css_file id='76'}}

Result:

<link rel="stylesheet" type="text/css" href="/typeroom/css/styles.css" />

Details:

Parameter	Type	Default	Description
id	int	0	REQUIRED: This is the TypeRoom internal ID to a CSS file that was imported during template or content import.

{{js_file}}

Prints a path to a TypeRoom managed JavaScript file.

Code:

{{js_file id='54'}}

Result:

<script type="text/javascript" src="/assets/514/prototype.js">

Details:

Parameter	Type	Default	Description
id	int	0	REQUIRED: This is the TypeRoom internal ID to a JS file that was imported during template or content import.

{{local_link}}

Prints a path to a TypeRoom managed page. TypeRoom automatically replaces links to internal pages with this function when saving a template or content in order to ensure links are not broken if a page is moved.

Code:

<a href="{{local_link id='15'}}">contact

Result:

<a href="/contact">contact

Details:

Parameter	Type	Default	Description
id	int	0	REQUIRED: This is the TypeRoom internal ID to another page managed by TypeRoom.

Additional Information

Template code makes use of the Smarty Templating Engine.
The Smarty delimiters are {{ and }}. That means anything in-between these will be parsed by the template engine.
The engine recognizes two types of commands, variables and functions.
TypeRoom variables are pre-defined keywords words that are dynamically replaced when reloading the page. Variables start with a $.
Example: {{$pageName}}.
Functions are called with a keyword, followed by optional or required arguments. Example: {{plugin name="test_plugin"}}.
All variables and functions are available in content areas, templates and snippets.
Variable, function and parameter names are case sensitive.
Since TypeRoom uses Smarty as the template engine, modifiers can be run on variables. Ex: {{$title|lower}}, See Variable Modifiers Documentation.

Powered by Olark