Building a custom template for a news portal

This section shows how to configure eZ publish to let the content editor choose the display template that will be used for published articles. While this tip shows how to change the layout of the line article view, you can apply the concept to many different fields, for example changing the layout of an article between a press release, a news item and an information page.

In this example, we'll make the look of the article list page more dynamic. The default look of this page is shown below. As you can see, all the articles are displayed in the same way: title, introduction and right-aligned image.

Default article list

The instructions below show how to make this page display with a mix between left- and right-aligned images as well as a large center-aligned image.

Modified article list.

Adding a display selection

Because we want to let the content editor (the person writing the article in the eZ publish Administration Interface) choose how the article will be displayed, we need to add a selection attribute to the content structure of the article.

1. Find the article class in the Administration Interface ( Setup | Classes).
2. Click on the Content group.
3. Edit the class called Article.
4. At the bottom of the page, choose Selection and click Add.
5. Name this new attribute "Display type".
6. Add three new options: "Left", "Center" and "Right".
7. Save the class.

There will now be an extra drop-down list box when editing articles, providing the options "Left", "Center" and "Right".

Custom drop-down list for specifying the display template.

Dynamic template loading

The template used to display the article will vary depending on the display type selected by the user. The source code below shows how we can load templates based on the value of the selection type. We store the value of the user's selection in the $type variable in the first line. We then have an if, elseif, else construct which checks the value of $type and loads different templates accordingly. This code is stored in the file design/news/override/templates/line/article.tpl.

{let type=$node.object.data_map.display_type.content[0]}
 {if eq( $type, 0 )}
   {include uri="design:lineview/left.tpl"}
 {elseif eq( $type, 1 )}
   {include uri="design:lineview/center.tpl"}
 {else}
   {include uri="design:lineview/right.tpl"}
 {/if}
{/let}

Template for left-aligned article

The contents of the template for the left-aligned article are shown below. The only difference between this template and the right-aligned article template is the alignment parameter sent to the attribute_view_gui function.

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

{attribute_view_gui alignment=left 
                   image_class=articlethumbnail 
                   attribute=$node.object.data_map.image.content.data_map.image}

{attribute_view_gui attribute=$node.object.data_map.intro}

Template for center-aligned article

The template code for the center layout is shown below. Here we have changed the alignment to center and also changed the image to articlethumbnailwide. This image alias displays a full-width image.

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

{attribute_view_gui alignment=center 
                   image_class=articlethumbnailwide 
                   attribute=$node.object.data_map.image.content.data_map.image}

{attribute_view_gui attribute=$node.object.data_map.intro}

Template for right-aligned article

The template used to display an article with a right-aligned image is the default template included with eZ publish 3.x. The contents are:

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

{attribute_view_gui alignment=right 
                   image_class=articlethumbnail 
                   attribute=$node.object.data_map.image.content.data_map.image}

{attribute_view_gui attribute=$node.object.data_map.intro}