In the previous tutorial we managed to create a very simple "Hello World" template, which only outputted a hard coded paragraph with Hello World. That's not of much use, so in this tutorial we'll look at how to use dynamic values from our pages in templates.
Before we start, it might be a good idea to recap what we've done so far:
- We've created two Document Types and templates - "Home Page" and "Text Page"
- We've added some properties to the Document Types, so an author could edit some content in a WYSIWYG editor as well as add some Meta data information. These properties had:
- A "Name" which the author will see
- An "Alias" which is used in code and templates to access the property
- A "Tab" so we can divide properties into different section for better overview
- A "Type" which very simplified determines how the property looks like when editing it - is it an upload field, a WYSIWYG editor and a date chooser
- We've added a few pages to the content tree
- We've edited the "Home Page" template and hard coded Hello World
Adding html to our template
Now it's time to create a little more advanced template where we'll use the values stored on our pages. Have no fear, it's very easy and we'll take it slow.
Start by going to "Settings", fold out the "Templates" tree and click the "Home Page" template:
We'll replace the "Hello World" with some proper markup, so remove the "Hello World" and paste the following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[A title should be placed here]</title>
</head>
<body>
<div id="container">
<div id="navigation">
[Add navigation here]
</div>
<div id="content">
[Add page content here]
</div>
</div>
</body>
</html>
Click the Save icon in the toolbar and your screen should look like this:
As you can see, this is some very bare bone html complete with placeholders which will replace with some umbraco template elements in a moment. For now, go look at the website and do a view source:
Notice how the markup outputted by umbraco is completely identical to the markup you added in the template, including whitespace (tabbing). It shouldn't come as a surprise, remember I promised that umbraco wouldn't mess with your markup, but now you got evidence. With umbraco, you finally have a ASP.NET CMS that respects your markup. Now it's time to add some dynamics to the placeholders!
Accessing page properties in the templates
Let's head back to our "Home Page" template and replace the placeholders (the text in the square brackets) with some dynamic content - it's time to play with some umbraco template elements. So far we've just been adding good old html to the template, but if you want other than hard coded content in your templates (and that would be nice wouldn't it?) then you'll need to learn a little more.
In the previous tutorial I showed you the five different umbraco elements, but I also promised that you didn't really needed to write them yourself because the template editor offers build in UI.
We'll start by adding the title of our umbraco page to the html title header, so remove the text "[A title should be placed here]" and place your cursor inside the "TItle" elements and click the "Insert umbraco page field" button in the toolbar:
A new dialog will appear giving you some handy options for inserting page properties to your template. For now we'll focus on the simplest way to insert a property and then we'll get back to the various options in a later tutorial. If you open the dropdown from the "Choose field" you can see a list of all the page properties that's currently created in your umbraco installation. The ones in the bottom of the list, prefixed with a "@" is build-in properties that exists on all pages created. The ones in the top is the custom ones you've created.
For now choose "@pageName" from the "Choose field" drop down and click the "Insert" button in the bottom of the window:
umbraco will insert the template markup needed for the title of the page into your template:
Now do the same for the [Add page content here]:
- Remove the placeholder text
- Click the "Insert umbraco page field" button in the toolbar
- Choose "bodyText" in the dropdown (that's the alias of our WYSIWYG property we created in a previous tutorial, remember?) and click "Insert"
- Click "Save" in the toolbar
The final result should look like this (we'll work on the navigation in a later tutorial):
Now, go see your "Home Page" of your website. Notice how umbraco automatically insert the content into the template. You can try modifying the contents of the WYSIWYG editor or the title of your page. Just remember to Publish the page and then view it afterwards:
And again - view source will reveal the cleanest markup ever seen from a .NET powered CMS:
Next steps
Now that you've learned to insert properties into a template the next step will be to look at how we can apply master templates. We'll look at that tomorrow.