Template Basics

[VS Admin]

The purpose of this guide is to give an overview of the ProBoards v5 Template Engine.  This guide is meant for people with at least a small amount of HTML and JavaScript experience.

Background

The purpose of the v5 Template Engine is to provide you direct access to your forum's HTML.  Previously, ProBoards forum owners used JavaScript codes to manipulate the forum's HTML, which could be quite complicated.  This is no longer necessary in v5.  We provide you access to the forum's template files in your forum Admin panel.  To look at the templates that are available to you, login to your forum and visit Admin > Themes > Layout Templates.

Here is a sample of one of the layout templates, Micro Profile.  This template is used to display a very small "micro" profile of a user on the forum:

<div class="$[microprofile_class]">
<div class="avatar">
$[user.avatar_small]
</div>
<div class="info">
<div class="nowrap">
<span class="name">$[user]</span>
<span class="small">($[user.username])</span>
</div>
{if $[user.is_deleted]}
<em>Deleted Member</em>
{elseif $[user.group]}
<div class="nowrap group-overflow">$[user.group.name]</div>
$[user.group.stars]
{else}
$[user.rank.name]<br />
$[user.rank.stars]
{/if}
</div>
</div>
Template Syntax

Variables

Templates use variables to output information.  Variables are displayed in the format $[variable_name]. In the above template example, you will see many variables such as $[user], $[user.rank.name], $[user.rank.stars], etc.  When editing a template, there is a list of available variables on the right side of the screen.

If / Else If / Else

In the template above, you will see {if} {elseif} and {else} used.  The code that is placed inside of these sections will only display is the condition is true.  For example:


{if $[user.is_deleted]}
This will only display if the user is deleted
{elseif $[user.group]}
This user is NOT deleted, and they have a user group to display.
{else}
This user is NOT deleted, and does NOT have a group to display
{/if}

Arrays & Loops

Some variables are arrays.  For example, in the template "Thread List" you have an array called $[thread] that you need to loop through to display a list of threads.  Here is how you would loop through each item in this area:


{foreach $[thread]}
Looping through thread: $[thread]<br />
This thread was created by $[thread.created_by_user]<br />
{/foreach}
If $[thread] has two threads in it, this is what sample output may look like:

Looping through the thread: Testing Thread
This thread was created by: VS Admin
Looping through the thread: Another Thread
This thread was created by: Ryan Roos


Objects

There are a few different types of objects that we use in v5.  These objects will always have consistent variables everywhere they are used in the template system.  Examples of objects are:

• User
• Thread
• Post
• Conversation
• Message

If you see a $[thread] object in one template, you will know that it has access to all the same variables as any other template that has a thread variable.

Template Comments

You can place comments in your templates.  Template comments are never output to the screen.

{* This is a template comment
it can even go on multiple lines! *}