Common template issues

Here you will find examples of some features you are likely to need when developing your own templates. Consult the eZ template documentation for the complete documentation of the template engine.

In this example we will create an override template for the 'full' view mode of the Folder class. To test it, create a file called 'full_class_1.tpl' in the directory 'design/admin/override/templates/node/view'. Login to the admin interface, create a test folder, and fill it with some articles.

Note: When developing templates you should disable the view cache. When this is enabled, the template engine does not check the modification date of the templates, thus you will not see any changes. Edit settings/site.ini and set ViewCaching=disabled in [ContentSettings].

Just a list

This example simply lists out the names of the articles who are children of the folder we are viewing. The fetch statement fetches a list of children whose parent node id equals our node id, and assigns it to the template variable $children. The name of our node is printed as a header, and then we use a loop to print the name of each child. Looping is done with the section function. Note how we assign a namespace for the loop, called 'Child' in this example.

{* set children variable *}
{let children=fetch('content',list,hash(parent_node_id,$node.node_id))}

<h1>{$node.name}</h1>

{* loop children and print name *}
{section name=Child loop=$children}
{$Child:item.name}<br>
{/section}

{/let}

This will output something like this:

A list with links to children

In the second example we will output links to the child objects, not just their names. We use the function 'node_view_gui' to print the child objects, and select the 'line' view mode.

{* set children variable *}
{let children=fetch('content',list,hash(parent_node_id,$node.node_id))}

<h1>{$node.name}</h1>

{* loop children and show line view *}
{section name=Child loop=$children}
{node_view_gui view=line content_node=$Child:item}<br>
{/section}

{/let}

This will output something like this:

A more complex list

Since this is a news page example, we will now try some functionality that might be used on a news site. We show the two most recent news titles on the top, with the ingress, and a link to the full article. For the remaing articles we simply show the name, linked to the full article, as in the previous example. To achieve this we use the 'max' and 'offset' input parameters. In the first loop we set 'max=2', meaning that up to two items will be show in this loop. In the second loop we set 'offset=2', meaning that this loop will start two items from the beginning of the list, in other words with the third item.

We also use the 'delimiter' function to show the remaing articles in a two-column list. The delimiter function is used when we want to do something between each item in a loop. In this case we output the closing and starting <tr>-tags. We set 'modulo=2' for the delimiter, meaning that the delimiter will only be used for every second list item. Thus, this part of the table will contain two cells per row.

{* set children variable *}
{let children=fetch('content',list,hash(parent_node_id,$node.node_id))}

<h1>{$node.name}</h1>

<table border='0'>
{section name=Child loop=$children max=2}
  <tr>
    <td colspan="2">
      <h2>{$Child:item.name}</h2>
      <p>{$Child:item.data_map.intro.data_text}</p>
      <p><a href={concat("/content/view/full/",$Child:item.node_id)|ezurl}>Read more...</a></p>
    </td>
  </tr>
{/section}

  <tr>
    <td colspan="2">
      <h2>More news:</h2>
    </td>
  </tr>
  <tr>
{section name=Child loop=$children offset=2}
    <td>
    {node_view_gui view=line content_node=$Child:item}
    </td>
  {delimiter modulo=2}
  </tr>
  <tr>
  {/delimiter}
{/section}
  </tr>
</table>

{/let}

This will output something like this:

A even more complex list - with colours

In the final example we set alternating colours for the lines in the list, using the 'sequence' function. Sequence is used two loop trough a list, and wrap around when the end is reached. This is very useful for alternating colours. We set two parameters, the namespace and the array of items to loop. (In this case the array contains four items, allthough we only use two colours. This is because the section loops over table cells, and there are two cells per line.) We get the current sequence item using the namespace and 'item', and we advance to the next item by calling sequence again with the same namespace.

{* set children variable *}
{let children=fetch('content',list,hash(parent_node_id,$node.node_id))}

<h1>{$node.name}</h1>

<table border='0'>
{section name=Child loop=$children max=2}
  <tr>
    <td colspan="2">
      <h2>{$Child:item.name}</h2>
      <p>{$Child:item.data_map.intro.data_text}</p>
      <p><a href={concat("/content/view/full/",$Child:item.node_id)|ezurl}>Read more...</a></p>
    </td>
  </tr>
{/section}

  <tr>
    <td colspan="2">
      <h2>More news:</h2>
    </td>
  </tr>
  <tr>
{sequence name=Seq loop=array("#A0FFA0","#A0FFA0","#D0FFD0","#D0FFD0")}
{section name=Child loop=$children offset=2}
    <td bgcolor="{$Seq:item}">
    {node_view_gui view=line content_node=$Child:item}
    </td>
{* Get next item in the sequence *}
{sequence name=Seq}
  {delimiter modulo=2}
  </tr>
  <tr>
  {/delimiter}
{/section}
  </tr>
</table>

{/let}

This will output something like this: