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.
Find the blog posts on the Blog in the Content section.
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.
Go to the Settings section.
Expand the Templates folder.
Navigate to the Blogpost template.
This is the template that is rendering the full page view of a blog post
Find the element with the blogpost-date class and change it to use a nicely formatted Publication Date, i.e.:
Click Save to save the template. A confirmation message appears confirming the Template is saved.
View the blog post page in the browser. Navigate to the page in the Content tree and select the link on the Info tab.
In , we displayed a nicely formatted publication date on the blog post page.
Finally, in Part Three we shall change the blog listing.
In the Settings section, expand the Partial Views > Components > LatestBlogPosts folder.
Select Default.cshtml.
Scroll down to find the foreach loop.
Declare a new publicationDate variable as the first thing within the loop:
Locate the blogpost-date element a bit further down and change it to use the new variable:
The ToLongDateString() method is called on the publicationDate variable to format it as a long date string.
Redefine the blogposts variable before the first div tag - this will be used for sorting the posts:
Because we are sorting by a custom property we need to use the generic Value method.
You can use Query builder to construct your queries in a more structured and reusable manner. Use the UmbracoHelper or the IPublishedContentQuery interface to build queries dynamically. For more information, see the article.
Locate the @foreach loop, and change Model.Blostposts to the variable created above: blogposts:
Save the partial view - a confirmation message should appear confirming that the Partial view has been saved.
Now view both the Blog overview and the blog posts themselves in the browser to confirm that all is working as expected.
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.
In this lesson, you will learn how to add a new date property to blog posts.
Content editors can specify the publication date for a blog post. Blog posts are displayed with the most recent publication date appearing first.
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
In the Settings section, expand Document Types.
Click on Blogpost. This is the Document Type that defines the fields for this type of page.
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.
Give the property a name: Publication Date.
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.
Select Select Property Editor to specify what type of data is being stored.
Select the Date Picker icon since we need a standard date.
Enable the field in the validation section to make it mandatory.
Click Add to close the dialog and save the property.
Select the Reorder option near the top-right of the window.
Drag the new property after Page Title.
A logical order to your properties will make things easier for your editors.
Click I am done reordering near the top-right of the window.
Select Save the Document Type. A confirmation message appears confirming that the Document Type is saved.
