Theme Tip: 5 useful template tags

IPS4's theme system has a feature called template plugins, which are special tags that do something to the values you pass in. You'll see them throughout the templates - they look like this:

{lang="..."}

This tag displays the language string for the key you pass into it, and is probably the most commonly used one. But there's many others too, so let's review some of the useful ones you can use in your themes and addons.

{member}

If you need to show any data about a member, the {member} tag is very useful. It's a shorthand that can display properties and call methods on a member object, so it's much neater than the manual approach. It's used like this:

// Get a property, like 'name'
{member="name"}

// Call a method, like 'link()'
{member="link()"}

By default, it will work with the currently logged-in member, but you can pass an id attribute to show data about any member:

// Show the name of member #67
{member="name" id="67"}

{expression}

The expression tag allows you insert simple one-line PHP expressions into your templates. For example, if a variable is an array of values and you want to show one per line, instead of writing a loop, you could do:

{expression="implode( '<br>', $myArray )"}

{prefix}

The prefix tag is unusual in that it's designed specifically for use in CSS files. It prefixes CSS styles with the various vendor prefixes, meaning instead of writing:

.myClass {
	-webkit-transform: scale(3) rotate(45deg);
	-moz-transform: scale(3) rotate(45deg);
	-o-transform: scale(3) rotate(45deg);
	transform: scale(3) rotate(45deg);
}

You can write:

.myClass {
	{prefix="transform" value="scale(3) rotate(45deg)"}
}

{hextorgb}

Continuing with the CSS theme, next there's the "Hex to RGB" tag. If you're a theme designer and want to use a theme setting value but apply some transparency, this tag will be particularly useful to you. Color theme settings are simple hex values, e.g. #000000. To apply some transparency, you need to use the rgba notation however (the 'a' meaning 'alpha channel', otherwise known as transparency). The {hextorgb} tag does this for you.

It accepts either a hex color, or a theme setting key. By default it outputs the same color in rgb notation, but if you want to add transparency, you can add an opacity parameter which will represent the alpha channel value.

{hextorgb="#ff0000"}
--> rgb(255,0,0)

{hextorgb="page_background" opacity="0.6"}
--> rgba(235,238,242,0.6)

{truncate}

Finally, there's the truncate tag. This tag takes some text (usually as a variable), and truncates it to the length you specify. By default it appends an ellipsis (...) to the end of the content, although this is configurable via the append parameter.

{truncate="$someLongText" length="300"}

Note that this isn't designed to be used on HTML markup; you may break your page if HTML tags are included in the text. For those cases, consider using the javascript ipsTruncate widget instead.

I hope this overview of 5 lesser-known template tags will help you as you build themes or applications! Share your related tips in the comments.