Customizing Content with CMS Template Language

(Website Administrator only)

[Related Topics]

A display template provides a customizable view of a content item’s properties such as title and author. These properties are dynamically inserted through the use of CMS template language. There are three different ways to add template variables to display properties:

This topic includes reference material for:

• Properties
• Alternate Syntax
• Base Properties
• Related Items
• Categories
• Formatting Dates and Strings
• Request Parameters
• Constituent Profile Data
• t:include
• Local Variables
• Image Properties
• User Attributes
• Static Backup
• Using Conditionals

[Back to Top]

Properties Syntax

[Related Topics]

To insert a dynamic content property in a display template, use the <t:value> element with an ID attribute corresponding to the property name:

<t:value id="property_name" null="Alternate text">Lorem Ipsum Dolor</t:value>

For example:

<t:value id="description" null="This item has no description!">A description of My Content Item</t:value>

By default if the value of the specified property is null, the system does not write anything. You can use the null attribute to specify alternate output when the value is null.

The <t:value> element itself does not appear in the output HTML. Its content is placeholder text, which the actual property value replaces when a page is published using the template.

You can wrap the template element with a span tag or other markup if you wish to apply class or style attributes. For example:

<h1><t:value id="title">My Content Item's Title</t:value></h1>

Note: Before you can use CMS Template Language, you must integrate CMS with Constituent360 APIs. See Integrating CMS with Constituent360 APIs for details.

[Back to Top]

Alternate Syntax

[Related Topics]

The <t:value> tag cannot be the value of an HTML tag attribute, such as the href attribute of an anchor <a> tag. In such cases, use an alternate syntax to specify a dynamic property. For example:

You can find <a href="${url}">more details</a>.

Note that the null attribute is not supported in the alternate syntax.

[Back to Top]

Base Properties

[Related Topics]

The following base properties are available for every content type:

[Back to Top]

Displaying Multiple Related Items

[Related Topics]

The value of a related items property is a set of zero or more other content items. Display the values with the <t:list> iterator with an ID attribute corresponding to the property name. For example:

<t:list id="related_items_property_name">
<t:value id="title">The Related Item’s Title</t:value>
</t:list> 

The markup inside the tag is repeated for each related content item. Each repetition should contain the <t:value> tags to display property values for the item. Inside the list, property names refer to the related item, rather than to the parent item associated with the page as a whole.

A list of values of related items can be included in a single display template or nested inside a list template.

You can use <t:if> tests for index and length to display related items. For example:

would render the following HTML for 3 related items:

• <a href="page-1.html">Page One</a>
• <a href="page-2.html">Page Two</a>
• <a href="page-3.html">Page Three</a>

A short-cut syntax for accessing properties of related items is ${related_item.related_item_property}. For example, take a Press Release content type that has a property called "author" which is a related item of type Author. If the Author content type has properties "first_name" and "last_name", then the following code in the Press Release single display template:

<div>By: ${author.first_name} ${author.last_name}</div>

would render as:

<div>By: Mickey Mouse</div>

for Press Releases authored by Mickey Mouse.

If there is more than one related item, only the first will render using the short-cut syntax. In the previous example, consider what would happen if the Press Release content type were configured to allow multiple related Author items. On a Press Release co-authored by Mickey Mouse and Oswald the Lucky Rabbit, the code above would still render as if Mickey were the sole author.

[Back to Top]

Category Syntax

[Related Topics]

The value of a category-backed property is a set of zero or more individual category values.

These values can be displayed by using the t:list iterator with an ID attribute that corresponds to the property name. For example:

<t:list id="category_property_name">
<t:value id="label">Category Name Goes Here</t:value>
</t:list>

It often makes sense to use <t:if> tests for index and length when displaying categories. For example:

<t:if test="category_property_name.length > 0">
<t:list id="category_property_name">
<t:value id="label">Category Name</t:value>
<t:if test="index < length"><br /> </t:if>
</t:list>
</t:if>

Would render the following HTML for 3 related categories:

• Category A
• Category B
• Category C

If you want to quickly print out any categories selected for a category-backed property field, you can simply print ${category_property_name}. The output will look like this:

Category A, Category B, Category C

It is also possible to render a set of categories outside the context of an item. The first step is to define a categories data source:

<t:data name="colors" class="categories" parent="/color" />

This defines a data source named colors that refers to the category named color that lives under the top category.

Once the data source is defined, it can be accessed using the standard <t:list> syntax:

<t:list id="colors">
<div>${label}</div>
</t:list>

Here is an example of rendering an HTML form select list based on a set of categories.

<t:data name="colors" class="categories" parent="/color" />
<form>
Select a color:
<select name="color">
<t:list id="colors">
<option value="${name}">${label}
</t:list>
</select>
</form>

[Back to Top]

Formatting Dates and Strings

Use the format attribute to specify how a date will appear in the published page. For example:

<t:value id="publicationDate" format="5">June 21, 2016</t:value>

Supported values for format are:

• 0 - 21 Jun 16 12:00 PM EDT
• 1 - Jun 21, 2016 12:00 PM EDT
• 2 - 21 Jun 2016 12:00:35 PM EDT
• 3 - 06/21/16
• 4 - 21 Jun 2016
• 5 - 21 Jun 2016
• 6 - 06/21/2016
• 7 - 2016-11-10T15:50:14-0800 (ISO)
• 8 - Wed, 10 Nov 2016 15:50:14 -0800
• 9 - 2016-11-10T15:04:14,0
• 10 - 2016-11-10

Custom date formats are also supported:

<t:value id="publicationDate" type="date" format="EEE, d MMM yyyy k:mm:ss Z">Wed, 10 Nov 2016 15:50:14 -0700</t:value>

[Back to Top]

Request Parameters

[Related Topics]

Use

${param.param_name}

to access the values of request parameters passed in the URL query string. Given

http://www.mysite.org/my_folder/my_page.html?foo=bar,

you can access the value of the query string parameter, foo, in the page with:

The URL parameter foo has a value of: ${param.foo}

Or:

<t:set id="myFoo" value="param.foo" /> <t:if test="myFoo == 'bar'"> My foo equals bar! </t:if>

[Back to Top]

t:include

[Related Topics]

The t:include syntax provides a way to insert components without the DIV tags that wrap the component contents when using the standard syntax.

For example, this syntax for embedding a list component in a page body:

<p>
<div class=templateComponent id=templatelist-28417928 style="DISPLAY: inline"></div>
</p>

generates this HTML:

<p>
<div class=templateComponent id=templatelist-28417928 style="DISPLAY: inline">
<ol>
<li> List Item 1
<li> List Item 2
</ol>
</div>
</p>

Using the t:include tag eliminates the extra DIV. So this example:

<p>
<t:include id=templatelist-28417928></t:include>
</p>

generates this HTML:

<p>
<ol>
<li> List Item 1
<li> List Item 2
</ol>
</p>

[Back to Top]

Local Variables

[Related Topics]

The CMS templating system supports setting local variables. Local variables can be created using the t:set command. Values can be static strings (for example, "This is a string") or dynamic values set using other template syntax functions.

<t:set id="myVar" value="'0'" /><t:set id="teaser" value="truncate(body,250)" />

You can use local variables to print values or test against other data.

<t:set id="lang" value="'en'"/>
<t:if test="header.accept_language == 'fr-CA'">
<t:set id="lang" value="'fr'"/> </t:if>
<script type="text/javascript">
window.location = '${lang}/index.html';
</script>

Note that template tags are not interpolated within variable values.

[Back to Top]

Image Properties

[Related Topics]

Image properties such as image width and height are available in both display and list template.

Width: <t:value id="imagewidth"></t:value>
Height: <t:value id="imageheight"></t:value>

[Back to Top]

User Attributes

[Related Topics]

User attributes can be applied for basic personalization without having to make a Rest call. The following properties are available:

• user.isanonymous
• user.firstname
• user.lastname
• user.fullname
• user.email

<t:if test="user.isanonymous == true">
Welcome guest!
</t:if>
<t:else>
Welcome <t:value id="user.fullname"></t:value>!

[Back to Top]

Static Backup

[Related Topics]

Use the following request parameter to control the presentation of the static version of the site.

<t:if test="param.cms_static == true">
This content only shows up in the static backup.
</t:if>

[Back to Top]

Related Topics

• Using Conditionals to Display Personalized Content
• Adding Constituent360 and MultiCenter Data
• Convio Constituent360 API Documentation