Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
First Look at vBulletin 4 Template Tags
Wayne Luke
Join Date: Jan 2002
Posts: 1,679

Southern California
by Wayne Luke Wayne Luke is offline 01 Jul 2009

Reposted from my site at 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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

If the array looked like:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

The output could look like:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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.

Last edited by Wayne Luke; 18 Nov 2011 at 15:34.. Reason: Correcting Typo
Views: 15911
Reply With Quote
Comments
  #2  
Old 01 Jul 2009, 14:29
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Real name: Brooks
Awesome! Thank you for this Wayne
__________________
"Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time!"
"It's important to only think about what you desire, not what you fear to achieve your ultimate goal!!
Reply With Quote
  #3  
Old 06 Jul 2009, 23:13
pein87's Avatar
pein87 pein87 is offline
 
Join Date: Sep 2008
Thanks this looks good 4.0 will be the best php software ever.
Reply With Quote
  #4  
Old 24 Jul 2009, 16:04
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Real name: Joe Velez
great article Wayne - 5 stars
__________________
Former vBulletin.org Staff Member

Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web


If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!
Reply With Quote
  #5  
Old 24 Jul 2009, 16:18
Brandon Sheley's Avatar
Brandon Sheley Brandon Sheley is offline
 
Join Date: Mar 2005
Real name: Brandon
Originally Posted by Princeton View Post
great article Wayne - 5 stars
5 stars from me as well
__________________
Reply With Quote
  #6  
Old 10 Aug 2009, 11:34
lalbahadur lalbahadur is offline
 
Join Date: Mar 2008
Real name: Ajitem Sahasrabuddhe
Excellent. Nice additions..
Reply With Quote
  #7  
Old 08 Sep 2009, 19:01
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Real name: Brooks
Ok, quick question. Instead of using this code inside of templates to not display something

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

We would use this?

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Or either one?
__________________
"Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time!"
"It's important to only think about what you desire, not what you fear to achieve your ultimate goal!!
Reply With Quote
  #8  
Old 08 Sep 2009, 19:15
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by Redlinemotorsports View Post
Ok, quick question. Instead of using this code inside of templates to not display something

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

We would use this?

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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?
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #9  
Old 08 Sep 2009, 19:25
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Real name: Brooks
Yes, thank you
__________________
"Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time!"
"It's important to only think about what you desire, not what you fear to achieve your ultimate goal!!
Reply With Quote
  #10  
Old 26 Oct 2009, 00:09
RenatoMN's Avatar
RenatoMN RenatoMN is offline
 
Join Date: Nov 2008
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).
Reply With Quote
  #11  
Old 26 Oct 2009, 21:54
Dax IX Dax IX is offline
 
Join Date: Jul 2005
Real name: Emily
Thank you, Wayne!

This actually looks a lot easier and better than the old system, and seems more logical, too.
__________________
Just a placeholder.
Reply With Quote
  #12  
Old 09 Nov 2009, 20:39
syrus.xl's Avatar
syrus.xl syrus.xl is offline
 
Join Date: Jun 2005
vB4 as come a long way with coding. Much appreciated Wayne!
Reply With Quote
  #13  
Old 12 Nov 2009, 02:08
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
I think it became more complicated !
__________________
Egypt News website, latest Egyptian news updated instantly.
Reply With Quote
  #14  
Old 20 Nov 2009, 14:41
Zaiaku's Avatar
Zaiaku Zaiaku is offline
 
Join Date: Jul 2007
Not all that different. Very helpful. I do like the comment options though very much.

TY
__________________
Live everyday as if it was your last, because one day it just may be.
Reply With Quote
  #15  
Old 20 Nov 2009, 17:29
niake niake is offline
 
Join Date: Oct 2003
Thank you
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 18:39.

Layout Options | Width: Wide Color: