Creating the template

These documentation pages are no longer maintained. Please visit the new documentation site.

Make sure that the "Links" link from within the main menu actually works (edit the pagelayout template file and fix it). Now, if you attempt to access the link, you'll probably be presented with a page that looks something like this:

If you have been paying attention during the earlier stages of the tutorial, you should be familiar with the stuff that comes next. What you're looking at is the default/standard full view template. The next natural step is to change this. Use the administration interface to create a template override. If you're still unsure about this procedure, refer to the following hints:

  • Override this file: "/node/view/full.tpl"
  • Name of new template: "full_view_links_folder.tpl"
  • Matching keys: folder class, links section
  • Base on: empty file

Now that we've created the override, let's start thinking about the template itself. On the left hand side, we could display a list of the sub-folders that are inside the main "Links" folder. When a sub-folder is accessed (the user clicks on it within the browser), eZ publish should list the sub-folder's contents. In this case, the sub-folders contain hyperlinks. Each of these should be presented as a link. When clicked/accessed, the browser should follow the link by opening it in a new window/tab. On the right hand side, we could for example display the name and the description of the folder that was accessed. All this may sound a bit difficult at first. However, it is actually fairly simple. We'll put it together step by step, one piece at a time.

We'll need a bit of CSS, so let's start by adding the following lines to the "tscm.css" file:

.links

{

   font-size: 80%;

   vertical-align: top;

   width: 200px;

}

Now, edit the template file that was created when you added the template override (should be "design/tscm/override/templates/full_view_links_class.tpl") and put in the following lines:

<div class="pagetitle">

Links

</div>

<table>

   <tr>

       <td class="links">

           {* Include the tree menu. *}

           {include uri="design:links_tree_menu.tpl"}

       </td>

       <td valign="top">

           {* Display the folder's name. *}

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

           <br />

           <br />

           {* Display the description of the folder. *}

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

       </td>

   </tr>

</table>

As you can see, we are splitting the page into two parts (vertical split) using a table. The left portion will be used to display the tree menu, the right portion will be used to display information about the folder that is being accessed. When the "Links" link is accessed (from within the main menu), the right portion will automatically display its name and description (the "Links" folder is simply just another folder from which we can extract the name and the description fields). If you attempt to browse the "Links" page at this point, eZ publish will generate something that looks like this:

Comments

Contents

Building an eZ publish site

Prerequisits
Situation
Creating the TSCM site
Testing the interfaces
Setting up the main layout
Creating sections
The welcome page
The news page
The members page
The guestbook
The links page
    Adding content
    Creating the template
    Displaying the sub-folders
    Displaying the contents of a folder
    Creating a tree-style appearence
    Same content at different locations


Created

26/11/2003
5:46:39 pm
by Balazs Halasy

Last updated

19/07/2004
2:18:03 pm
by Kåre Køhler Høvik

Authors

Balazs Halasy
Kåre Køhler Høvik



This page is part of the eZ Publish documentation. The documentation is available under the GNU Free Documentation License. All contributions will be released under the terms of this license.