ORGANIZING TEMPLATES FOR REUSE

Chapter 4 focuses on the creation and management of the templates themselves. This section discusses the practical application of those templates and how managing templates correctly can make for a very flexible presentation engine.

In most cases a document type has a one-to-one relationship with a template. By default, this is the case when you create a document type and elect to have a template created as part of the process. What you may not know is that any given document type can have any number of associated templates, as shown in Figure 8-4.

FIGURE 8-4

Several reasons exist for this feature:

• A document type may support different types of output based on media type or device type.
• A node's content may need to have the flexibility to be presented differently without having to recreate the content using a different document type.
• Features of a page may need to be toggled by an editor, such as the inclusion of second-level navigation, a sidebar, or other content.
• A multi-site environment, as in Chapter 6, needs to have different templates based on the site that is being rendered.

So, when you create your templates, make sure to take into account the various page types that they need to support. One example of when to share a document type with two templates is for toggling a feature of a page. To illustrate the point, follow these steps:

1. Log in to your Umbraco installation and click the Settings section.
2. Expand Templates Runway Master to reveal the two child templates, Runway Homepage and Runway Textpage.
3. Right-click Runway Master and click the Create menu option.
4. In the name field, type in Runway Textpage + Sidebar, as shown in Figure 8-5, and click Create.

   FIGURE 8-5

   

5. Copy the template contents from Listing 8-1 into the newly created templates, replacing what appears there by default. What this does is utilize the sideNavigation container that is already defined, and populates it with the sidebarContent field.

   LISTING 8-1: RunwayTextpage+Sidebar.master

   

   <%@ Master Language=“C#” MasterPageFile=“~/masterpages/RunwayMaster.master”
   AutoEventWireup=“true” %>
   <asp:Content ContentPlaceHolderID=“RunwayMasterContentPlaceHolder”
        runat=“server”>
       <div id=“content”>
           <umbraco:Macro Alias=“SiteBreadcrumb” runat=“server”></umbraco:Macro>
               <div id=“contentHeader”>
               <h2><umbraco:Item runat=“server” field=“pageName”/></h2>
           </div>
           <umbraco:Item runat=“server” field=“bodyText” />
       </div>
       <div id=“subNavigation”>
               <umbraco:Item runat=“server” field=“sidebarContent” />
           </div>
   </asp:Content>

6. While still in the Settings section of Umbraco, expand the Document Types node and click the Runway Textpage document type to open the details in the right-hand pane.
7. As shown in Figure 8-6, select the newly created template in the Allowed templates field.

   FIGURE 8-6

   

8. Click the Generic Properties tab toward the top of the screen.
9. Click the Click here to add a new property option, and fill in the fields as illustrated in Figure 8-7 (Description is optional).

   FIGURE 8-7

   

10. Save the document type.

What you have done so far is to extend the functionality of the text page document type and add a template to support the new sidebar feature. To see this feature in action, you can change one of the pages in the content tree and check out the result as described in the following steps. When you view the details of any content page in the content tree, you can now see the added Sidebar Content field, as shown in Figure 8-8.

FIGURE 8-8

1. Click the Content section in Umbraco.
2. Expand the Runway Homepage node and click the Installing runway modules node.
3. Enter some content in the Sidebar Content field.

   A tip text snippet was added in this example to remind editors that they must select the appropriate template when utilizing the Sidebar Content field.

4. Click the Properties tab and select the new template, as shown in Figure 8-9.

   FIGURE 8-9

   

5. Save and publish the page and view the results.