PDA

View Full Version : First Look at vBulletin 4 Template Tags


Wayne Luke
01 Jul 2009, 14:13
Reposted from my site at www.vbcodex.com (http://www.vbcodex.com)

Following my previous article, I want to give some information about the new template tags in vBulletin 4. The use of template tags is not a new concept to vBulletin 4 developers and designers. We have been using them for years for conditional statements and building phrases that had parameters.

In vBulletin 4, Phrase parsing has been moved to the variable parsing system but conditional usage has been improved and several new tags have been added to make things easier. Like the variable system I talked about earlier, tags are in their own namespace so all tags are prefixed with 'vb:'. This actually provides several benefits but the primary one is that you can program scriptable web editors like Dreamweaver or Expressions Web to parse these conditionals and provide output based on values you provide. They also allow proper syntax highlighting to occur in most web editors.

Template Conditionals
Everyone who has worked with vBulletin templates in the past should be familiar with template conditionals. They provide a wide range of use in determining what information to show depending on various conditions. In vBulletin 3.X, the IF conditional was simple and easy to use. In fact, you can still use pretty much the same format in vBulletin 4. However a couple of new tags were added to make conditionals more robust.

Here is an example:

<vb:if condition="$show['guest']">
<div class="alert">You are a guest, no soup for you.</div>
<vb:elseif condition="$is_member_of($bbuserinfo,6)" />
<div class="adminalert">Hello {vb:raw bbuserinfo.musername}! Let's get to work.</div>
<vb:else />
<div class="useralert">Welcome Back {vb:raw bbuserinfo.musername}!</div>
</vb:if>
The new thing here is the <vb:elseif /> tag. It allows you to branch your conditions better and reduce the number of nested conditions you may need to make.

Conditionals also have a new shorthand using a curly brace syntax. In today's templates, you see a lot of code that looks like this:

<a href="somepage.php<if condition="$album['albumid']">album=$album[albumid]<else />group=$group[groupid]</if>">link text</a>
That is a brief example but makes a real mess of syntax highlighting and can't even be validated. With the new shortform notation it would look like this:

<a href="somepage.php{vb:if $album['albumid'] : album=$album[albumid] ? group=$group[groupid]}">link text</a>
As you can see the second examples looks a lot cleaner and maintains syntax highlighting.


Each
For a long time, users have wanted a way to do loops in templates. Heck, I have wanted to be able to do loops in templates. vBulletin 4.0 includes the <vb:each> tag which accomplishes just that. While it is not being used for the default templates at this time, it will probably be used in the future to eliminate some of the many 'bit' templates in the system. The Each tag will allow you to easily process an array and apply formatting to its elements.

Example:

Welcome this week's new users: <ul>
<vb:each from="newusers" key="userid" value="newuserinfo">
<li><a href="member.php?u={vb:var userid}">{vb:var newuserinfo.username}</a></li>
</vb:each></ul>
If the array looked like:

$newusers = array(
1 => array('username' => 'Adam', 'email' => 'adam@adam.com'),
2 => array('username' => 'Ben', 'email' => 'ben@ben.com'),
3 => array('username' => 'Chris', 'email' => 'chris@chris.com')
);
The output could look like:

Welcome this week's new users: Adam Ben Chris

Comment
How many times have you wanted to leave commented notes in a template so you can understand why you did what you did? Or you work on a team so others need to know what is being done in a template? Before now, you would have had to use HTML comments that would have been output to the Browser and visible in the page's source code. vBulletin 4.0 introduces the comment tag so you can add your comments and not worry about them being sent to the client. Comments will be stripped when the template is compiled into PHP. Can also be used for hiding code blocks from being output to the user.

Example:

<vb:comment>This is a comment and won't be shown in page source code.</vb:comment>

Literals
The final new tag is the literal tag. It allows you to stop the parsing of any nested tags or variable syntax within the tags. It works similar to the noparse BB Code. It is handy when you want the template to simply output the raw HTML instead of putting it through the template parser.

Example:

<vb:literal>This will output exactly like this {vb:raw somevariable}</vb:literal>

Summary
While the changes to tags are not as extensive as variable handling, the new tags provide new ways of handling templates and will provide better abilities to create addon products in the future. The Each and Comment tags will come in especially handy while doing customizations in the future. I hope this gives you another good glimpse into the vBulletin 4.0 template system.

HMBeaty
01 Jul 2009, 15:29
Awesome! Thank you for this Wayne :)

pein87
07 Jul 2009, 00:13
Thanks this looks good 4.0 will be the best php software ever.

Princeton
24 Jul 2009, 17:04
great article Wayne - 5 stars

Brandon Sheley
24 Jul 2009, 17:18
great article Wayne - 5 stars

5 stars from me as well :up:

lalbahadur
10 Aug 2009, 12:34
Excellent. Nice additions..

HMBeaty
08 Sep 2009, 20:01
Ok, quick question. Instead of using this code inside of templates to not display something
<!-- This is a comment and won't be shown in page source code. -->
We would use this?
<vb:comment>This is a comment and won't be shown in page source code.</vb:comment>
Or either one?

bobster65
08 Sep 2009, 20:15
Ok, quick question. Instead of using this code inside of templates to not display something
<!-- This is a comment and won't be shown in page source code. -->
We would use this?
<vb:comment>This is a comment and won't be shown in page source code.</vb:comment>
Or either one?

you can still use the HTML comment, but it will display when someone "views source" where as using the <vb:comment>, that comment will be stripped and not processed by the HTTP server, hence not being visible when someone views source.. make sense?

HMBeaty
08 Sep 2009, 20:25
Yes, thank you

RenatoMN
26 Oct 2009, 01:09
I reached this page searching for a way to do loops in templates. Seems I will have to code it the hard way for now... :(

However, happy to know it will be available (and specially that it will look for "keyid's", allowing multidimensional arrays).

Dax IX
26 Oct 2009, 22:54
Thank you, Wayne!

This actually looks a lot easier and better than the old system, and seems more logical, too. :)

syrus.xl
09 Nov 2009, 21:39
vB4 as come a long way with coding. Much appreciated Wayne! :)

abdobasha2004
12 Nov 2009, 03:08
I think it became more complicated ! :(

Zaiaku
20 Nov 2009, 15:41
Not all that different. Very helpful. I do like the comment options though very much.

TY

niake
20 Nov 2009, 18:29
Thank you :up:

Reeve of shinra
23 Nov 2009, 06:23
you can still use the HTML comment, but it will display when someone "views source" where as using the <vb:comment>, that comment will be stripped and not processed by the HTTP server, hence not being visible when someone views source.. make sense?

Makes sense -- off hand, anyone know if <vb:comment> show up in the html source code when vb is in debug mode?

vietfancy
28 Nov 2009, 16:01
have anybody try to use
<vb:if condition="$is_member_of($bbuserinfo,6)">

do something
</vb:if>

It's not working for me.

Lynne
28 Nov 2009, 16:10
It isn't $is_member_of, it's simply is_member_of (no $ in front).

AndrewD
06 Dec 2009, 07:44
Something to be aware of with the conditional tag.

Whereas in vb3.x, fetch_template was typically eval()'d in the scope of the function that created the template output, in vb4, the template is eval()'d inside another function. Since the conditional test refers to standard php variables rather than the vb registered template variables, this can create a situation where the variable you are testing is not in scope, so the test will always fail.

For example:

function myfunc() {
$myvar = 1;
$templater = vB_Template::create('mytemplate');
$templater->register(myvar', $myvar);
print_output($templater->render());
}


where mytemplate contains:

val: {vb:raw myvar}
<vb:if condition="$myvar==1"> say again {vb:raw myvar}</vb:if>


will only output "val: 1"

You can get round this by explicitly referring to the registered variable in the vb:if condition as follows:


val: {vb:raw myvar}<br />
<vb:if condition="$this->registered['myvar']==1"> say again {vb:raw myvar}</vb:if>


which will output "val: 1 say again 1", which is what the equivalent vb3.x template would have achieved.

Lynne
06 Dec 2009, 16:20
Thanks for posting that, Andrew. I haven't run into that problem yet, but I know I will and I'll be pulling my hair out and then I'll remember this post of yours and the world will be right again. :)

Antivirus
20 Dec 2009, 07:24
"each" tag makes me so happy! thanks :)

TheSupportForum
30 Dec 2009, 13:17
i am trying to use the following template variables in forum blocks and widgets but dont work can anyone help please

the code only seems to work in templates and not forum blocks or widgets and need help




<center>
<a href="http://safeweb.norton.com/report/show?url={vb:raw $vboptions[bburl]}" target="_blank"><img src="{vb:stylevar imgdir_misc}/norton.gif" border="0" alt="$vboptions[bburl] tested by McAfee Security" title="$vboptions[bburl] tested by McAfee Security"></a>
<a href="http://www.siteadvisor.com/sites/{vb:raw (http://www.siteadvisor.com/sites/%7Bvb:raw) $vboptions[bburl]}" target="_blank"><img src="{vb:stylevar imgdir_misc}/mcafee.gif" border="0" alt="$vboptions[bburl] tested by McAfee Security" title="$vboptions[bburl] tested by McAfee Security"></a>
</center>

Vaupell
03 Jan 2010, 18:23
is it possible to put a vb:raw condition in ?

$value = 1;


<vb:if condition="{vb:raw value}==1"> do stuff.

Lynne
03 Jan 2010, 21:30
You don't use the {vb:stuff} in conditions. You would still use $value in the condition.

wolfyman
21 Jan 2010, 22:03
have anybody try to use
<vb:if condition="$is_member_of($bbuserinfo,6)">

do something
</vb:if>

It's not working for me.

It isn't $is_member_of, it's simply is_member_of (no $ in front).

<vb:if condition="!is_member_of($bbuserinfo,6)">

Gives me:

* unclosed_tag

TimberFloorAu
25 Jan 2010, 12:34
So to if condition for a specific user.

Would we use:

<vb:if condition="$show['admin']">

or:

<vb:if condition="$bbuserinfo['userid'] == 1">