Building a custom template for a news portal

The news articles are placed on the frontpage in three different ways by using the node_view_gui function. These varying displays are called view modes.

Override settings

Each view mode must have its own configuration setting in the override file in order to know which template to load. The settings used for the article view modes are shown below, and are stored in the file settings/siteaccess/news/override.ini.append.php.

# Override for article in large view mode
[article_large]
Source=node/view/large.tpl
MatchFile=large/article.tpl
Subdir=templates
Match[class_identifier]=article 

# Override for article in medium view mode
[article_medium_item]
Source=node/view/medium.tpl
MatchFile=medium/article.tpl
Subdir=templates
Match[class_identifier]=article 

# Override for article in small view mode
[article_small_item]
Source=node/view/small.tpl
MatchFile=small/article.tpl
Subdir=templates
Match[class_identifier]=article

Large article template

The large article template is the template used to display the first article on the page. It is included by the node_view_gui function by specifying the view mode large. This article is displayed in full page width. The template for this view mode is shown below.

{* Display article title as a link *}
<h1><a href={$node.url_alias|ezurl}>{$node.name|wash}</a></h1>

{* Display right-aligned image, if present *}
{if $node.object.data_map.image.has_content}
 <div class="attribute-image">
     {attribute_view_gui alignment=right
                         image_class=medium
                         attribute=$node.object.data_map.image.content.data_map.image
                         href=$node.url_alias|ezurl}
 </div>

{/if}

{* Display article introduction *}
<div class="attribute-short">
 {attribute_view_gui attribute=$node.object.data_map.intro}
</div>
 
{* Display "Read more" link *}
<div class="attribute-link">
 <p><a href={$node.url_alias|ezurl}>{"Read more"|i18n("design/base")}</a></p>
</div>

The first part of this template shows the name of the article as accessed from the $node.name variable. The link to the article is fetched by accessing the $node.url_alias variable. (For other data provided by the $node variable, use the attribute template operator for introspection.) The ezurl operator is used to convert the relative path to an absolute path. This ensures that you can re-use your template in different eZ publish installations.

If there is an image present in the article, it is displayed via the attribute_view_gui function. This is a function similar to node_view_gui, but it works on object attributes rather than whole objects. In this case, we use it to find the correct image template to display the article image with the following display characteristics:

• Right-aligned
• Medium-sized image alias
• Linked to the article

The article introduction is also displayed with the attribute_view_gui function. This loads the default template to display XML formatted text.

The last part of the template shows the text "Read more" as a link. The link URL is fetched from the $node.url_alias variable. The link text is handled by the i18n() operator, which means that the text can be translated by the eZ publish translation system.

Medium article template

The contents of the medium article view mode are shown below. It differs from the large article view mode as follows:

• Uses the h2 instead of h1 HTML tag
• Generates a smaller image by using the articlethumbnail image alias
• Does not display a "Read more" link

{* Display article name as a link *}
<h2><a href={$node.url_alias|ezurl}>{$node.name|wash}</a></h2>

{* Display right-aligned image *}
{if $node.object.data_map.image.has_content}
 <div class="attribute-image">
   {attribute_view_gui alignment=right 
                       image_class=articlethumbnail
                       attribute=$node.object.data_map.image.content.data_map.image}
 </div>
{/if}

{* Display article introduction *}
<div class="attribute-short">
 {attribute_view_gui attribute=$node.object.data_map.intro}
</div>

Small article template

The template for the small article view mode is shown below. This template is the smallest and consists of only the name of the article in a clickable link.

<a href={$node.url_alias|ezurl}>{$node.name|wash}</a>