Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles

Reply
 
Thread Tools
First Look at vBulletin 4 Template Tags
Wayne Luke's Avatar
Wayne Luke
Join Date: Jan 2002
Posts: 1,694

 

Southern California
Show Printable Version Email this Page Subscription
Wayne Luke Wayne Luke is offline 06-30-2009, 10:00 PM

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:
HTML Code:
<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:
HTML Code:
<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:
HTML Code:
<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:
HTML Code:
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:
PHP Code:
 $newusers = array(
    
=> array('username' => 'Adam''email' => 'adam@adam.com'),
    
=> array('username' => 'Ben''email' => 'ben@ben.com'),
    
=> array('username' => 'Chris''email' => 'chris@chris.com')
  ); 
The output could look like:
Code:
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:
HTML Code:
<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:
HTML Code:
<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.
Reply With Quote
  #2  
Old 07-01-2009, 01:29 PM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Awesome! Thank you for this Wayne
Reply With Quote
  #3  
Old 07-06-2009, 10:13 PM
pein87's Avatar
pein87 pein87 is offline
 
Join Date: Sep 2008
Posts: 352
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks this looks good 4.0 will be the best php software ever.
Reply With Quote
  #4  
Old 07-24-2009, 03:04 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

great article Wayne - 5 stars
Reply With Quote
  #5  
Old 07-24-2009, 03:18 PM
Brandon Sheley's Avatar
Brandon Sheley Brandon Sheley is offline
 
Join Date: Mar 2005
Location: Google Kansas
Posts: 4,678
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Princeton View Post
great article Wayne - 5 stars
5 stars from me as well :up:
Reply With Quote
  #6  
Old 08-10-2009, 10:34 AM
lalbahadur lalbahadur is offline
 
Join Date: Mar 2008
Location: India
Posts: 20
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Excellent. Nice additions..
Reply With Quote
  #7  
Old 09-08-2009, 06:01 PM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Ok, quick question. Instead of using this code inside of templates to not display something
HTML Code:
<!-- This is a comment and won't be shown in page source code. -->
We would use this?
HTML Code:
<vb:comment>This is a comment and won't be shown in page source code.</vb:comment>
Or either one?
Reply With Quote
  #8  
Old 09-08-2009, 06:15 PM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Redlinemotorsports View Post
Ok, quick question. Instead of using this code inside of templates to not display something
HTML Code:
<!-- This is a comment and won't be shown in page source code. -->
We would use this?
HTML Code:
<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?
Reply With Quote
  #9  
Old 09-08-2009, 06:25 PM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yes, thank you
Reply With Quote
  #10  
Old 10-25-2009, 11:09 PM
RenatoMN's Avatar
RenatoMN RenatoMN is offline
 
Join Date: Nov 2008
Location: Brazil
Posts: 63
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply

Thread Tools

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


All times are GMT. The time now is 09:13 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04598 seconds
  • Memory Usage 2,318KB
  • Queries Executed 25 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_code
  • (10)bbcode_html
  • (1)bbcode_php
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (10)post_thanks_box
  • (4)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete