Jump to content
Rikki
 Share


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.

 Share

Comments

Recommended Comments

9 minutes ago, Flitterkill said:

@Rikki has the hextorgb tag ever been discussed, well..., anywhere before? This seems like a new thing. 

Same here, so useful for me.

I've been either scrapping the transparency out and instead using a color option, or just creating a transparency option/value that plays with the same theme option it needs to be presented to.....

Would have made my life easier if I ever heard of it lol.

Link to comment
Share on other sites

Thanks @Dylan Riggs, I thought I was nutz.

Same here on all points, kludging around the color transparency calls. Still have to do two vars in theme settings but this is so much more streamlined.

We were, back in the olden days, supposed to get the HTML5 color picker out of the gate but once they realized it was poorly supported by browsers (back then) they scrapped it for the js picker (which is way basic) we see everywhere in the suite.

When I asked about getting another open source js color picker included (which did handle opacity) I was told the backend is locked down on non-rgba stuff so no.

This helps immensely.

Link to comment
Share on other sites

November 2015 and this (according to search) is the first time it's been mentioned.

Not sure if that's the craziest thing or that no one noticed until now. It may be that your usage on the revamped IPS site is the first time it's seen the light of day.

Link to comment
Share on other sites



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...