Templating ... a simple guide

All style (template, theme and imageset) related questions for the new release; advice, feedback here please.
Post Reply
User avatar
psoTFX
Registered User
Posts: 1984
Joined: Tue Jul 03, 2001 8:50 pm
Contact:

Templating ... a simple guide

Post by psoTFX »

This is a very brief guide to how templates have changed in 2.2. If you have specific questions (templates coding only!) please reply here.

File naming

Firstly templates now take the suffix ".html" rather than ".tpl". This was done simply to make the lifes of some people easier wrt syntax highlighting, etc.

Variables

The basic syntax for simple (non-block) vars remains the same as with 2.0.x. That is variables take the form {X_YYYYY} with the data being assigned from the source. Note that unlike 2.0.x most language strings are not assigned from the source. When a language variable is found {L_YYYYYY} phpBB first looks if an assigned variable exists with that name. If it does, it uses that. If not it looks if an exsting string defined in the language file exists. This should reduce the need to assign loads of new lang vars in Mods.

Blocks

The basic block level loop remains and takes the form:

Code: Select all

<!-- BEGIN loopname -->
markup, {loopname.X_YYYYY}, etc.
<!-- END loopname -->
However this has now been extended with the following additions. Firstly you can set the start and end points of the loop. For example:

Code: Select all

<!-- BEGIN loopname(2) -->
markup
<!-- END loopname -->
Will start the loop on the third entry (note that indexes start at zero). Extensions of this are:

loopname(2,4): Starts loop on third values, ends on fourth
loopname(-4): Starts loop fourth from last value
loopname(2, -4): Starts loop on third value, ends four from end

Note that the indexing method may change since it's not really consistent at this time :)

A further extension to begin is BEGINELSE:

Code: Select all

<!-- BEGIN loop -->
markup
<!-- BEGINELSE -->
markup
<!-- END loop -->
This will cause the markup between BEGINELSE and END to be output if the loop contains no values. This is useful for forums with no topics (for example) ... in some ways it replaces "bits of" the existing "switch_" type control (the rest being replaced by conditionals, see below).

Including files

Something that existed in 2.0.x which no longer exists in 2.2.x is the ability to assign a template to a variable. This was used (for example) to output the jumpbox. Instead (perhaps better, perhaps not but certainly more flexible) we now have INCLUDE. This takes the simple form:

Code: Select all

<!-- INCLUDE filename -->
You will note in the 2.2 templates the major sources start with INCLUDE overall_header.html or INCLUDE simple_header.html, etc. In 2.0.x control of "which" header to use was defined entirely within the code. In 2.2.x the template designer can output what they like. Note that you can introduce new templates (i.e. other than those in the default set) using this system and include them as you wish ... perhaps useful for a common "menu" bar or some such. No need to modify loads of files as with 2.0.x

PHP

A contentious decision has seen the ability to include PHP within the template introduced. This is achieved by enclosing the PHP within relevant tags:

Code: Select all

<!-- PHP -->
echo "hello!";
<!-- ENDPHP -->
You may also include PHP from an external file using:

Code: Select all

<!-- INCLUDEPHP somefile.php -->
it will be included and executed inline.

A note, it is very much encouraged that template designers do not include PHP. The ability to include raw PHP was introduced primarily to allow end users to include banner code, etc. without modifing multiple files (as with 2.0.x). It was not intended for general use ... hence http://www.phpbb.com" target="_blank will not make available template sets which include PHP. And by default templates will have PHP disabled (the admin will need to specifically activate PHP for a template).

Conditionals/Control structures

The most significant addition to 2.2.x are conditions or control structures, "if something then do this else do that". The system deployed is very similar to Smarty. This may confuse some people at first but it offers great potential and great flexibility with a little imagination. In their most simple form these constructs take the form:

Code: Select all

<!-- IF expr -->
markup
<!-- ENDIF -->
expr can take many forms, for example:

Code: Select all

<!-- IF loop.S_ROW_COUNT is even -->
markup
<!-- ENDIF -->
This will output the markup if the S_ROW_COUNT variable in the current iteration of loop is an even value (i.e. the expr is TRUE). You can use various comparison methods (standard as well as equivalent textual versions noted in square brackets) including:

== [eq]
!= [neq, ne]
<> (same as !=)
!== (not equivalent in value and type)
=== (equivalent in value and type)
> [gt]
< [lt]
>= [gte]
<= [lte]
&& [and]
|| [or]
% [mod]
! [not]
+
-
*
/
<< (bitwise shift left)
>> (bitwise shift right)
| (bitwise or)
^ (bitwise xor)
& (bitwise and)
~ (bitwise not)
is (can be used to join comparison operations)

Basic parenthesis can also be used to enforce good old BODMAS rules. Additionally some basic comparison types are defined:

even
odd
div

Beyond the simple use of IF you can also do a sequence of comparisons using the following:

Code: Select all

<!-- IF expr1 -->
markup
<!-- ELSEIF expr2 -->
markup
.
.
.
<!-- ELSEIF exprN -->
markup
<!-- ELSE -->
markup
<!-- ENDIF -->
Each statement will be tested in turn and the relevant output generated when a match (if a match) is found. It is not necessary to always use ELSEIF, ELSE can be used alone to match "everything else".

So what can you do with all this? Well take for example the colouration of rows in viewforum. In 2.0.x row colours were predefined within the source as either row color1, row color2 or row class1, row class2. In 2.2.x this is moved to the template, it may look a little daunting at first but remember control flows from top to bottom and it's not too difficult:

Code: Select all

<table>
<!-- IF loop.S_ROW_COUNT is even -->
<tr class="row1">
<!-- ELSE -->
<tr class="row2">
<!-- ENDIF -->
<td>HELLO!</td>
</tr>
</table>
This will cause the row cell to be output using class row1 when the row count is even, and class row2 otherwise. Big deal you say, 2.0.x did that! True, but here you are not limited to using class row1 or row2 ... you can use any defined class, set your own inline style, etc. What's more you are not limited to two row colours at all ... e.g.

Code: Select all

<table>
<!-- IF loop.S_ROW_COUNT > 10 -->
<tr bgcolor="#FF0000">
<!-- ELSEIF loop.S_ROW_COUNT > 5 -->
<tr bgcolor="#00FF00">
<!-- ELSEIF loop.S_ROW_COUNT > 2 -->
<tr bgcolor="#0000FF">
<!-- ELSE -->
<tr bgcolor="#FF00FF">
<!-- ENDIF -->
<td>hello!</td>
</tr>
</table>
This will output the row cell in purple for the first two rows, blue for rows 2 to 5, green for rows 5 to 10 and red for remainder. So, you could produce a "nice" gradient effect, for example.

What else can you do? Well, you could use IF to do common checks on for example the login state of a user:

Code: Select all

<!-- IF S_USER_LOGGED_IN -->
markup
<!-- ENDIF -->
This replaces the existing (fudged) method in 2.0.x using a zero length array and BEGIN/END.

Overview

So as noted this a brief overview of some of the changes in templates made for 2.2.x.

User avatar
Mighty Gorgon
Registered User
Posts: 14
Joined: Wed Sep 17, 2003 8:52 am
Location: Italy
Contact:

Re: Templating ... a simple guide

Post by Mighty Gorgon »

I think that all these new commands are very powerful, in particular Conditional Structures that will simplify designer's life.

Regarding Header And Footer, I noticed that now page_header.php and page_footer.php are gone, while two functions took their places. Which is the benefit of using functions instead of files?

Thanks.

Roberdin
Registered User
Posts: 1546
Joined: Wed Apr 09, 2003 8:44 pm
Location: London, United Kingdom

Re: Templating ... a simple guide

Post by Roberdin »

Well it means that you can specify the header you want to output in the tempalte itself. The functions do not output any HTML to the browser, they merely declare template variables and the like.

Alos, its simpler for devs to type

Code: Select all

page_header();
than

Code: Select all

include('includes/page_header.php');
BTW: that opening <?php is annoying me. Many code snippets are not the entire php code, so having those forcefully after the

Code: Select all

 tag is annoying. An ACP option I hope ;)
Rob

User avatar
psoTFX
Registered User
Posts: 1984
Joined: Tue Jul 03, 2001 8:50 pm
Contact:

Re: Templating ... a simple guide

Post by psoTFX »

That's alright you're annoying me at the moment, unfortunately no ACP option exists to handle that at present ;) and :D

It has nothing to do with <!-- INCLUDE -->. It was moved to a function because it saves including two additional files for something that is used on practically every single page. It also reduces security issues since overwriting variables cannot occur in the same way as with a directly included file.

User avatar
kazuki
Registered User
Posts: 8
Joined: Fri Oct 31, 2003 3:13 am

Re: Templating ... a simple guide

Post by kazuki »

Franky, I like this kind of structure, it would be easier for me to make one. :D
Area 51, yes, AREA 51] - You know that?!

metest12
Registered User
Posts: 15
Joined: Fri Jun 20, 2003 5:29 pm

Re: Templating ... a simple guide

Post by metest12 »

I love the new system in 2.2 :D

But one question: can you make it possible to use vars in INCLUDEs ( I know it isn't now because I tried)

for example:

Code: Select all

<!-- INCLUDE page_{MYPAGE}.html -->
I am integrating phpBB 2.2 (well 2.1 now) into my new site and it will have a block manangement system, and the only way it will work is that way because assign_var_from_handle is gone.

Thanks and keep up the good work

Roberdin
Registered User
Posts: 1546
Joined: Wed Apr 09, 2003 8:44 pm
Location: London, United Kingdom

Re: Templating ... a simple guide

Post by Roberdin »

http://sourceforge.net/tracker/?func=ad ... tid=580201" target="_blank

Go post it there (You'll need to register there first.)
Rob

Ptirhiik
Registered User
Posts: 144
Joined: Sun Apr 06, 2003 12:29 pm

Re: Templating ... a simple guide

Post by Ptirhiik »

psoTFX wrote:(../..)Something that existed in 2.0.x which no longer exists in 2.2.x is the ability to assign a template to a variable.(../..)
hum... Should I understand that all the assign vars process will be static for one spot of the template ? Actually, the ability to assign various results and format depending on any condition and parsed from various templates is a very powerfull feature in phpBB 2.0, although the assign_block_var_from_handle is missing, and I see here nothing that could cover it (includes seems to simply be a merge tpls feature). How would you performed this kind of thing :

Code: Select all

if ($see_user)
{
   $res = see_user($id);
}
else if ($see_topic)
{
   $res = see_topic($id);
}
else if ($see_forum)
{
   $res = see_forum($id);
}
$template->assign_var_from_handle('TPL_BOX', $res);

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Templating ... a simple guide

Post by Arty »

Ptirhiik wrote:How would you performed this kind of thing :

Code: Select all

if ($see_user)
{
   $res = see_user($id);
}
else if ($see_topic)
{
   $res = see_topic($id);
}
else if ($see_forum)
{
   $res = see_forum($id);
}
$template->assign_vars(array('MY_RES' => $res));

Code: Select all

<!-- IF MY_RES eq 1 --><!-- INCLUDE res_1.html --><!-- ELSEIF MY_RES eq 2 --><!-- INCLUDE res_2.html --><!-- ELSE --><!-- INCLUDE res_3.html --><!-- ENDIF -->

Ptirhiik
Registered User
Posts: 144
Joined: Sun Apr 06, 2003 12:29 pm

Re: Templating ... a simple guide

Post by Ptirhiik »

This won't work : res are never a static tpl, but a variable one, so from there you be able to cover the need with a simple if statement. When you are at this point, you don't know how many and which tpls you will use. This would means no plug-ins system for this purpose without editing each time the main tpl, which is exactly what avoid today the assign_var_from_handle().

Post Reply