Jump to content
Matt

IPB 3: Making Templating Easier

HTML logic has been a feature of Invision Power Board for quite some time now. Although we didn't make much use of the '<foreach>' tag so that skins could be backwards compatible, we did make good use of the <if> <else /> logic. Now that we have a clean slate with v3.0, we can really make some positive changes.

Invision Power Board 3.0 makes full use of the existing HTML logic and adds some more functionality. This allows for some dramatic customization without touching any of the PHP code. Where possible, each 'view' (board index, topic listing, viewing a topic) has a single template. Previous versions 'stitched' together several templates (as many as 30!) to create a single page view. This meant that some items were fixed and unable to be moved. For example, on the board index, it was not possible to move the board stats above the list of forums. Likewise it was not possible to move the active users below the board statistics.

Now you can. You can move any item to any place for that view without having to edit the PHP files themselves. This will really open up designer's creativity and allow some really unique looking templates.

Another leap forward for Invision Power Board 3 is the ability to use display logic in the templates themselves. Naturally, we were always able to use <if> and <else /> but you can now use the following standard tags:

The Date Tag:
Examples:

{%date="1210012321"|format="manual{d m Y}"%} {%date="-1 day"|format="long"%}

{%date="now"|format="long"|relative="false"%}



For the first time, you can now explicitly specify a date format on a per-use basis. The tag accepts either a unix 'timestamp' or a human string like 'now', '-1 day', 'tomorrow', etc. The format parameter can either be a standard IPB date format (long, short, joined, etc) or a manual PHP Date format.

The Parse Tag:
Examples:

<parse expression="substr( $data['name'], 0, 10 )" />

<parse expression="sprintf( "14", "There are %s apples in the bag" )" />



This parse tag allows you to make on-the-spot parsing using PHP code. This tag is replaced with the value returned from PHP.

The URL Tag:
Examples:

{%url="foo=1&bar=2"|base="public"%}

{%url="foo=1&bar=2"|label="Click Me"|base="public"|id="myLink"|class="linkCSS"|onclick="this.function()"%}



The first example will actually create the entire <a href='' ... >...</a> HTML chunk whereas the second example will only return a formatted URL. The main reason for this tag is to prevent hardcoded entire URLs or even fixing part of the URL to a setting. In IPB 2.3 it wasn't unusual to see this:

<a href='{$this->ipsclass->base_url}&act=login'>Log In</a>



The new method would be like so:

<a href='{%url="act=login"|base="public"%}'>Log In</a>



The 'base' value being 'public' tells the template engine to use the public URL and not the ACP url. The real power of this feature lies in the return value being automatically fed via formatURL() which can return a friendly URL if friendly URLs are enabled.

The Variable Tag:

Example:

<variable key="tdColor" oncondition="$foo == "green"" value="green" /> <variable key="tdColor" oncondition="$foo == "black"" value="black" /> <span style='color:<variable="tdColor" />'>Hello World!</span>

<variable key="tdColor" default="blue" />





In this example, depending on $foo having a value of green:

<span style='color:green'>Hello World!</span>



This tag allows you to decide in the template itself how part of the template should display without having to edit PHP code. This is a handy tag for use in foreach blocks to alternate between colours when showing posts, topics, etc.

Custom Tags
The tags URL and date tags shown above use the {%tag="foo"|param="bar"%} format. These are actually custom plug-ins. You can write your own custom plug ins and they are available immediately within the templates. You could even modify the default plug-ins to change their behaviour.

We're looking forward to how these new tools are used in your own templates!


×
×
  • Create New...