This morning Heather Floyd and I are presenting "Site Building with Umbraco 7" at Code Camp NYC. The presentation is geared towards web developers (particularly ASP.NET developers) who are not yet familiar with Umbraco. The slides are here, although much of the presentation is live discussion and demos of code.  There are two examples that I will present: a simple example that covers basics of building a site in Umbraco 7 and a more complex site based on the HTML5 Up theme Twenty in which I build strongly-typed View Models using the Umbraco Mapper package. In a future post I will elaborate on that example but for now I will review the basic example.

I will skip the installation of Umbraco 7 which is documented at Our.Umbraco.org. For my example (which I will post to Github), I did a basic installation using SQL CE and without a Starter Kit.

First, I create a Document Type called "Basic Page" -- leaving the check box checked to create a matching template. In the "structure" tab of the Document Type, I set Allow at root to "Yes" and Allowed child node types to "Basic Page". Then in the Tabs tab, I create a tab named "Content".  From the Generic Properties tab, I add the following properties to the Content tab of the Document Type:

  • Title (type: "textstring")
  • Body (type: "Richtext editor")
  • Lead Image (type: "Media Picker")

Next, I switch over to the Content section and create my first content node which I name "Home". I give the page a title, put in some ipsum for the body and an image which I upload. For details on using the back office interface, see the Umbraco 7 Editors Manual.

You can view the home page now, but it is blank. To display the content we need to edit the template. The template file was created when I created the Document Type because I left the check box checked to create a matching template. I next add the following static HTML to the Basic Page template:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

        <header id="header">
            <h1><a href="/">Home</a></h1>
            <nav id="nav">
                <ul>
                        <li>
                            <a href="#">Page One</a>
                        </li>
                        <li>
                            <a href="#">Page Two</a>
                        </li>
                        <li>
                            <a href="#">Page Three</a>
                        </li>
                </ul>
            </nav>
        </header>

        <!-- Main -->
            <section id="main" class="container">
                <header>
                    <h2>Title</h2>
                </header>
                <div class="box">
                    <span class="image featured"><img src="images/pic01.jpg" alt="" /></span>
                    <p>body</p>
                </div>
            </section>


    </body>
</html>

After saving the template with this HTML, the page now displays the static HTML. Of course, we want it to pull in the content from the node that we had saved. But first let's add some style. I create a new style sheet called "style.css" - you can grab the code from here. The page should now look okay but we need to pull in the content dynamically. Using the template editor, I replace the text inside the <h2> with @Umbraco.Field("title"). As with many things you can do with computers, there are multiple ways to do the same thing. For the main body, I use the dynamic syntax to insert the body: @CurrentPage.body. Finally, to display the image I set the src of the image tag to @Umbraco.Media(CurrentPage.leadImage).Url. We can now see the page with the content that we had saved earlier.

Next, I demonstrate how to create a dynamic navigation. To do this, I need to create a couple more pages of content as children of home. Next, I create a Partial View which I name "Menu" and select the "Navigation" template. This creates a partial with the following boilerplate code which I will leave as is:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage


@*
    Macro to display child pages below the root page of a standard website.
    Also highlights the current active page/section in the navigation with
    the css class "current".
*@

@{
    @* Get the root of the website *@
    var root = CurrentPage.AncestorOrSelf(1);
}

<ul>
    @foreach (var page in root.Children.Where("Visible"))
    {
        <li class="@(page.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
            <a href="@page.Url">@page.Name</a>
        </li>
    }
</ul>

I then replace the nav list in the template with @Html.Partial("Menu", Model). After all  these changes the template looks like this:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

        <header id="header">
            <h1><a href="/">Home</a></h1>
            <nav id="nav">
                @Html.Partial("Menu", Model)
            </nav>
        </header>

        <!-- Main -->
            <section id="main" class="container">
                <header>
                    <h2>@Umbraco.Field("title")</h2>
                </header>
                <div class="box">
                    <span class="image featured"><img src="@Umbraco.Media(CurrentPage.leadImage).Url" alt="" /></span>
                    <p>@CurrentPage.body</p>
                </div>
            </section>

    </body>
</html>

The site now looks pretty decent when it loads and you can navigate between pages.

Demo site

This is a very simple site and it is only meant to demonstrate the fundamentals of site building with Umbraco. There of course is a lot more that can be done. The implementation of the Twenty template demonstrates more advanced techniques and is also available on Github.