The news overview that we created in the previous section displays a list of the seven most recent articles that are stored inside the news folder. However, the page only shows a small fragment of the articles. The entire contents of an article can be accessed by clicking its headline or image. These are links to the full view of the article. When accessed, you should be able to see something like this:

What you're looking at is the standard template that eZ publish uses to display the full contents of an article object. The standard template is rather boring. We should really use a custom template instead. The following text explains how to generate a custom full-view-template for the "Article" content class within the "News section".

1. Bring up the administration interface.
2. Click on the "Design" tab.
3. Click on "Templates" (in the menu on the left hand side).
   A list of template files will appear.
4. Locate "/node/view/full.tpl" and click on it.
5. Click "New override" to create a new template.
6. Type in "full_view_news_article" into the "Filename" field.
7. Set the "Class" dropdown box to "Article".
8. Set the "Selection" dropdown box to "News section".
9. Do not enter anything into the node field (leave it blank).
10. In the "Base template on" section, select "Empty file".
11. Click "OK".

This will generate an empty file ("design/tscm/override/templates/full_view_news_article.tpl") and instruct eZ publish to use it every time an article that resides in the "News section" is viewed. Put the following lines into the newly generated file, raise priority, and flush the cache:

{* Display the headline, use huge characters. *}

<div class="headline">

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

</div>

 

{* Display the thumbnail image, right-justified. *}

<div class="imageright">

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

</div>

 

{* Display the intro-text using bold characters. *}

<b>

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

</b>

 

{* Display the actual body/content of the article. *}

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

This code will take care of displaying an article in a nice way. Try to access one of the articles from within the "Latest News" page (by clicking on either a headline or an image). You should be presented with something like this: