Written by Bill Woodson     For umbraco versions: Not Version related

Reference
Templates are also essential in umbraco, this book will hopefully give you a solid understanding of them and what they are for.

Contents

 

umbraco and Templates

umbraco defines two basic structures, Document Types and Templates.  Today we are focusing on Templates.  You can actually build your site inside of umbraco using only Templates.  However by doing this, you will have no content management what so ever, so what value does this provide.  The reason for using a Content Management System (CMS) is to allow you to change the text and graphics on your site without having to change the site layout or duplicate headers and footers for each page of your site.  It is very important that you understand Document Types because these provide the foundation of your content management.  If you are not familiar with Document Types I recommend you stop reading this book and read the one about Document Types.  Otherwise lets talk about Templates.  Templates are the primary display and style of your web site in umbraco. 

 

Templates

Templates contain the actual html, javascript, and other web code that make the pages display in a web browser.  When a page is requested from umbraco, umbraco reads the content reference, determines the Document Type, and discovers the Template.  The template then renders the html stored in it out to the browser.  If the template contains fields references or macro references those are resolved prior to rendering the html.  The image below shows the template view and the html/xhtml used to define the page layout and style.

templatesource

 

umbraco uses XHTML, I imagine because it is largely performing XSLT translations and XML parsing.  You may have issues if you are using HTML and not XHTML.  It is simple enough to convert  HTML to XHTML however performing this is outside of the scope of this document.  Templates can be nested, this allows you to remove much of the duplication that happens when creating web sites.  Common duplication occurs when a site uses the same header and footer for every page.  Nested Templates solve this by allowing you to create a single Template containing the basic site layout (header, content, footer, or whatever it may be) and then set it as the Master template for every other template in the site.  By using a master template in this way your simple page templates could very well be as simple as this:

simpletemplate

 

You may notice the line '<?UMBRACO_GETITEM field="bodyText"/>' in the image above.  This line is how you add content values from you Content into your view (Template).  The field "bodyText" is the alias given to a property in the Document Type defined for this Content.  You can read more about Document Types in the Document Types Explained book.  You can select a page field by clicking on that option in the button bar at the top of the "Edit template" button.

insertpagefield

 

When selecting a field from the drop down list in the Insert umbraco field dialog, you will see a list of every alias of every property in every Document Type; this is because umbraco makes no assumptions as to which Document Type you may have selected to use this Template. 

insertumbracofield

 

You may notice several fields in the list starting with a "@" symbol.  These fields are built into umbraco.  Fields like @createDate, @pageID are set automatically by umbraco anytime a Content Page is created.  You can use these in both your Templates as well as Macros.  Macros are a discussion for another time, but just to help you understand, Macros are blocks of dynamic functionality that can be created using XSLT, .Net web controls or Python scripts.

 

How we create Templates

We have talked quite a bit about what are Templates and how to add code to the templates, but how do we create them in the first place.  There are a couple of ways.  The first is when you create a Document Type you check the "Create matching template" check box in the Create Document Type dialog.  When you create a Template in this way, umbraco not only automatically creates the Template but it also associated the created Template to the Document Type by checking the Allowed Templates item for the Template and also sets the created Template as the Default Template in the Document Type.  For more information on this please read the  Document Types Explained book.  The second way to create Templates is by right clicking on the Templates node in the Settings tree and selecting the Create menu option as shown below.  By creating Templates in this manner, the Templates are not linked to a Document Type automatically.  Why would you want to create a Template without associating it to a Document Type?  Good question, typically this happens when you want to create a master template.  Master templates usually are not viewed directly but are blended with other page templates.

createtemplate

 

Summary

umbraco provides ultimate flexibility by not only separating the data collection task (content and document types) from the view (templates), but also reduces code duplication by nesting templates.  Templates allow the same data to be presented differently in different views by selecting more than one template for a Document Type.  Templates provide the view for all content in the umbraco CMS system.  NOTE: If you have created content and yet when you view the page in a browser you see nothing, or what is displayed is not correct, check your Template it is probably not correct.

 

Don't be afraid to experiment and have fun!