Customise the Starter Kit

Learn how to edit and publish content and customise the theme of the site.

Add a Blog Post Publication Date

If you don't want to use the creation date of blog posts, take this lesson to learn how to let content editors edit the publication date.

Add Open Graph Support

With a few steps you can add support for Open Graph pages on the site.

Ask for help and join the community

In Part One we added a new property to the Blogpost Document Type. Now in Part Two, we're going to display that instead of the default creation date.

Steps - Part Two

1. Find the blog posts on the Blog in the Content section.

2. Add publication dates to the blog posts.

   • Remember to publish your changes!

   • As this field is flagged as Mandatory you now can't save a post without it.

3. Go to the Settings section

4. Expand Templates, and Master, then click on Blogpost.

   • This is the template that is rendering the full page view of a blog post

5. Find the element with the blogpost-date class and change it to use a nicely formatted Publication Date, i.e.:

   Copy

   <small class="blogpost-date">@Model.PublicationDate.ToLongDateString()</small>

6. Save the Template - a confirmation message should appear confirming that the Template was saved.

7. View the blog post page in the browser (find the page in the Content tree, then select the link on the Info tab).

In Part Two, we displayed a nicely formatted publication date on the blog post page.

Finally, in Part Three we shall change the blog listing.

Steps - Part Three

1. In the Settings section, expand Partial View Macro Files.

   • Select LatestBlogPosts.cshtml.

   • Macros are beyond the scope of this lesson, but you don't need to understand them right now.

2. Scroll down to find the blogpost-date element and change it to use a nicely formatted Publication Date, i.e.:

   Copy

   <small class="blogpost-date">@post.PublicationDate.ToLongDateString()</small>

3. Further up in the view, you also need to redefine the blogposts variable:

   Copy

   var blogposts = startNode.Children.OrderByDescending(x => x.Value<DateTime>("PublicationDate")).ToList();

   • Because we are sorting by a custom property we need to use the generic Value method.

4. Save the partial view - a confirmation message should appear confirming that the Partial view has been saved.

5. Now view both the Blog overview and the blog posts themselves in the browser to confirm that all is working as expected.

Summary

Nice job! In this lesson, you've learned what a Document Type is and how to add a new Property to it. You've also learned how to change Templates and sort by custom Properties.

Back to Lessons

With a few steps, we can add Open Graph to our pages.

Outcome

Open Graph support will be added to the Homepage and Blog posts. It will be the minimum implementation of Open Graph containing the sites' title, type, URL, and image.

Takeaway

You will learn:

• How to create a reusable set of properties (called Document Type compositions)

• Add features based on where the composition is implemented

• Get the URL for content items and media items

We will now add the group and properties to the Home page and Blog post of the site.

This is done by using compositions to add the functionality in multiple places.

1. In the Settings section, expand the Document Type tree.

2. Open the Home Document Type and select Compositions... in the top-right.

3. Choose the Open Graph Document Type we created and Submit.

4. Save the Document Type.

This will add the group and properties from the Open Graph Document Type to the Home Document Type. Follow the same steps for the Blogpost Document Type.

Reviewing the changes

If you go to the content section and select Home you can now see your changes (the same goes for the blog posts).

The Starter Kit is the name of one of the Starter kits build for Umbraco by Umbraco HQ. It is a great way to familiarize yourself with Umbraco CMS.

Developed and maintained by Umbraco HQ and the Umbraco community it aims to give you the basic knowledge you need to hit the ground running.

Installing the Starter Kit will give you a basic site where you can:

• Show the content creation and editing capabilities in Umbraco from a content editor's point of view.

• Learn how to set up Umbraco by exploring the starter kit.

• Enhance the Starter Kit by following the lessons provided. The lessons aim to give you a good understanding of how you can tailor the editing experience and add features to an Umbraco site.

Overview

The Starter kit will install sample content for a small site. You can edit the content, or delete it and build your content from scratch.

The sample content includes:

• Home - The home (or frontpage) of the site.

• Text pages - Generic text page with multi-column layout options.

• Blog - Blog section for the site, with blog overview and blog posts.

• Products - Product section, with featured products ready for shop integration.

• People - People section, with people profiles. Can be used for an employee section, for example.

• Contact page - The contact page contains a customizable map and contact form.

Lessons

While familiarizing yourself with the Starter Kit you might have spotted some places where you would want some additional functionality. The following lessons will give you step-by-step instructions on how to add specific features:

Contribute to the Starter kit

You can contribute to the Starter Kit in the following ways:

In this lesson, you will learn how to add a new date property to blog posts.

Outcome

Content editors can specify the publication date for a blog post. Blog posts are displayed with the most recent publication date appearing first.

Takeaway

Learn how to:

• Add a new property to a Document Type

• Edit a Template to display the new property

• Sort a list of items by a new property

Steps - Part One

1. In the Settings section, expand Document Types.

2. Click on Blogpost. This is the Document Type that defines the fields for this type of page.
3. The Document Type contains 2 groups: Content and Navigation & SEO.

   • At the bottom of the Content group select Add property.

   • This opens the Property Editor dialog window.

4. Give the property a name: Publication Date.

5. Give the property a description: The date of the blog post. This is the date used to display the most recent posts first..

   • Always try to add a meaningful description to help your editors.

6. Select Add editor to specify what type of data is being stored.

   • We need a standard date, so click on the Date Picker icon.

7. In the validation section, enable the field to make it mandatory.

8. Submit to close the dialog and save the property.
9. Select the Reorder option near the top-right of the window, then drag the new property to be after Page Title.

   • A logical order to your properties will make things easier for your editors.

10. Click I am done reordering near the top-right of the window and select Save the Document Type - a confirmation message should appear confirming that the Document Type was saved.

Adding support for Open Graph can be done in many ways. In this lesson, we'll create a reusable set of properties we can add to specific page types.

First we need to see what the expected outcome will be. Open Graph for web pages needs to contain at least the following:

Looking at the above we can pull a couple of things out automatically and then add ways to input the rest.

In this lesson, we'll only add Open Graph Content of the type "website", so we don't need input for that. We can also get the URL for the page we are currently on. This leaves us with two remaining properties to add: title and image.

Create a document type composition

1. Go to the Settings section

2. Right-click on Document Types

3. Create a new Document Type without a template

4. Name the Document Type Open Graph

5. Create a group called Open Graph

6. Add a property to the group tab called Open Graph Title

7. Select Choose editor, search for textstring and add this to the tab.

8. Add another property named Open Graph Image and use the Media Picker editor.

9. Save the Document Type.

All done, great job! Now test out if it works. Try adding it to more document types. Remember this is only one way of adding this functionality. You might want additional Open Graph tags or the properties to be on a different tab (e.g. Navigation or SEO).

Summary

In this lesson, you have learned:

• To create a Document Type composition

• How to create and render a Partial view

• Compositions create an interface you can check on and use as a page model (IOpenGraph)

• How to get the full path (absolute URL) for both content and media items.

If you need some help, here's where to find it.

Outcome

You're a registered user of the developer community website, known as "Our".

Maybe you have even signed up to attend a local meetup!

Steps

1. Register on our.umbraco.com.

2. Search the forum, or browse the extensive documentation if you prefer more structured learning.

3. Please create a forum post if you don't know the best way to proceed. There are experienced community members online 24/7 so hopefully you won't have to wait long for a reply. We are always very excited to help out newcomers!

4. Check the home page of Our for any upcoming meetups near you. If there aren't any, keep an eye out for any online community hangouts happening soon.

5. Finally, do think about contributing yourself. Even if it's pointing out something in the documentation that could be made clearer, we'd love to hear from you.

Summary

Welcome, you are now a valued member of the Umbraco community!

Back to Lessons

Next step is to get the Open Graph code rendered on the website. This is done in the head section of the HTML, so you need to find the template for this.

In the Starter Kit the head is placed in the Master Template, which is responsible for wrapping all the other templates.

Because you've added the Open Graph feature as a composition you can check if the composition is present on the current page and then render meta tags.

1. Go to the Settings section and expand the Template tree.

2. Select the Master template

3. Find the <head> HTML tags at the top of the Template

4. Write the following before the closing </head> tag:

 @if(Model is IOpenGraph){
        @Html.Partial("../Views/Partials/OpenGraph.cshtml")
    }

This will render a partial view if the composition is present on the current page. Currently that is the case for Home and Blog posts on the site.

IOpenGraph is an interface created by adding the composition. When you know how that works you can see how powerful it can be. If not, enjoy the handy helper to check for the composition.

At the end, the head should look like this:

    <head>
        ...

        @if(Model is IOpenGraph){
        @Html.Partial("../Views/Partials/OpenGraph.cshtml")
    }
    </head>

The final piece to the puzzle is adding the partial view that will be rendered when the composition is present. To do this:

1. Go to the Settings section

2. Right-click on Partial Views and choose Create... > New empty partial view

   The partial view comes with a standard view model @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage. We are using compositions and only render this view on pages where the composition exists, which means we need to be a little more specific.

3. In the template editor, pass in the specific model you've created by adding <IOpenGraph>.

   • Now you can start rendering the meta tags and adding in the values.

4. First add the title property

   Copy

   <meta property="og:title" content="" />

5. Set the cursor in the content attribute and select the + Insert... button.

6. Select Value...

7. Under Choose field, select the openGraphTitle property.

8. Set the Default value to siteName.

   • This will make sure that even though the Open Graph title isn't filled in, it will fallback to the title of the site

9. Check Yes, make it recursive to ensure the fallback will work on all pages.

10. Add the Open Graph meta tag for type of content - you can hardcode "website" in here:

    Copy

    <meta property="og:type" content="website" />

11. Next up is adding the URL for Open Graph.

    • For this you'll need the entire URL to the page, not relative to this page.

    • There is a handy method for getting this from a content item. Add:

    Copy

    <meta property="og:url" content="@Model.Url(mode: UrlMode.Absolute)" />

12. The final thing we need to do is render the image selected on the Open Graph Image property.

    • You'll still need to render the entire URL for the image.

    • First, we'll create a variable to get the image:

    Copy

    @{
        var ogImage = Model.Value<IPublishedContent>("openGraphImage");
    }

    • Next, we add the meta property to get the path for the media item:

    Copy

    <meta property="og:image" content="@ogImage.Url(mode: UrlMode.Absolute)" />

13. Your partial view is now complete and should only render on pages that are using the Open Graph composition.

The final view should look like this:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<IOpenGraph>

<meta property="og:title" content="@Model.Value("openGraphTitle", fallback: Fallback.To(Fallback.Ancestors, Fallback.DefaultValue), defaultValue: new HtmlString("siteName"))" />
<meta property="og:type" content="website" />
<meta property="og:url" content="@Model.Url(mode: UrlMode.Absolute)" />

@{
    var ogImage = Model.Value<IPublishedContent>("openGraphImage");
}

<meta property="og:image" content="@ogImage.Url(mode: UrlMode.Absolute)" />

Pro tip: To keep the lesson short and to the point, we have left out null-checks from the code examples. So remember to fill in the Open Graph properties, in the content section, to avoid exceptions when viewing the page.

This lesson will teach you how to customize the Starter Kit.

Outcome

A customized version of the site with your Home page image, site name, color theme, font, and perhaps a logo in the header.

Takeaway

Learn how to:

• Navigate the editing area in the Content section.

• Interact with content properties.

• Upload images and use them with content items.

• Preview your changes before publishing the content to the site.

Steps

1. Go to the Home page in the Content section.

2. Navigate to the Design group by scrolling down or selecting it from the dropdown menu.
3. Choose a different font and color theme.

   • Try different combinations and see what fits your site.

   • Save a draft of your changes by using ctrl+s or clicking the Save button. Save will not publish the changes to the website.

   • Click Save and preview to see how the page looks on different screen sizes.

4. Try changing the background image of the Home page.

   • Hover over the Hero Background thumbnail and click the red cross icon to remove the current image.

   • You can now click the '+' to open a dialog where you can choose an image from the Media library or upload a new image.

   • Select the image you want and click Submit in the lower right corner.

5. Find the Sitename property and change the name of the site.

   • This is shown in the site navigation menu.

   • If you want a logo instead of the Site Name you can upload and/or choose an image from the Media Library.

6. When you are happy with the changes publish them to the website by clicking the Save and Publish button.

To see the changes you've made go to the Info tab and click on the link.

Summary

Nice job! In this lesson, you've learned to navigate and edit properties on a page. You've also learned the difference between the Save, Preview, and Save and Publish actions and how to use them.