The advantage of MODX is that you can create as many templates as you want (resources/site pages can have completely different designs, not similar to each other).
You can only assign one Template to a resource, but you can switch templates at any time once assigned to a resource. A template usually contains the header and footer of the page – and/or a sidebar, navigation bar, etc. We talked about this in the lesson on integrating templates/designs.
Usage
To create a template, expand the “Elements” part of the tree and right-click “Templates”. Select “Create new template”, or simply click the “+” next to templates to create a new template.
On the page that opens, write the name and paste your HTML code into the “Template Code” field.
You can copy and paste the text below to get started with a very simple template:
<html>
<head>
<title>[[*pagetitle]]</title>
<meta name="description" content="[[*description]]" />
</head>
<body>
<h1>[[*longtitle]]</h1>
Page ID: [[*id]]<br />
Introductory text (summary): [[*introtext]]<br />
Menu title: [[*menutitle]]
<hr />
[[*content]]
</body>
</html>Note the important [[*content]] tag — this tag tells MODX where to place the resource content.
MODX stores templates in its database by default. It is also possible to save templates as static files using Media Sources.
Remember that just creating a template does not mean it is automatically used: you must edit each Resource and specify which template it uses. This is different from some content management systems, where each template has one or more pages. Each MODX page has one template, which is used to format the output.
Once you have created one or more templates, you can edit any resource and select a template for it by selecting one from the “Template Usage” drop-down list.
Templates can contain any tags, including TV Template Variables, Chunks, Snippets, and others.
Using Resource Fields in a Template
As you noticed from our example template code above, resource fields can be referenced using the [[*fieldName]] syntax. The list of available resource fields can be found here. For example, if we want to show the title of the current resource in our <title> tag, we would simply do this:
<title>[[*pagetitle]]</title>
You can also place the content of the current resource using the “content” tag:
<body>
[[*content]]
</body>These tags are like regular MODX tags in that they can have output filters applied to them. For example, let’s say we want to display the “introtext” field in the right navigation bar, but strip it of any HTML tags and display only the first 400 characters — and add an ellipsis (…) if longer:
<div id="rightbar">
[[*introtext:stripTags:ellipsis=`400`]]
</div>Template Variables in Templates
If templates are like a house, think of template variables (TVs) as rooms in that house. You can have an infinite number of TVs in a template: just think of it like adding new rooms to the house.
TV template variables allow you to have custom fields for any resource with a specified template. Let’s say you want a field for photos in your resources in the “BiographyPages” template. Simple – just create a TV, name it “bioPhoto”, give it an input and output type of “image”, and assign it to the “BiographyPages” template. You will then see the TV in any resource that uses this template.
You can then reference your “bioPhoto” TV in your content with the same tag syntax as in the resource field:
<div class="photo">
[[*bioPhoto]]
</div>Again, it is important to note that Template Variables must be explicitly assigned to the template that will be used. Once assigned to a template, the TV value for that resource can be edited when editing the resource. If you do not see the newly created TV in your resources, make sure you have assigned this TV to the template.
