Create Blog home page content in Umbraco CMS

You must have already followed previous articles to continue as below instructions. In case if you have jumped to this article, you may follow below article first and prepare your solution to continue along with the code snippets. You can view a static content of blog home page in startbootstrap-blog-home.

1. Getting started with Umbraco CMS 7+
2. Install Umbraco on Localhost and Build Visual Studio Solution
3. Create a Master Template(layout) in Umbraco CMS part 1
4. Create a Master Template(layout) in Umbraco CMS part 2

Create a HomeController and Create a partial view with following Model.

using System;
namespace UmbracoDemoApp.Models
{
    public class PostSummaryModel
    {
        public PostSummaryModel(string imageUrl, string title, string postedBy, DateTime postedOn, string content)
        {
            ImageUrl = imageUrl;
            Title = title;
            PostedBy = postedBy;
            PostedOn = postedOn;
            Content = content;
        }

        public string ImageUrl { get;  }
        public string Title { get;  }
        public string PostedBy { get; }
        public DateTime PostedOn { get; }
        public string Content { get; }
    }
}

Your home controller should look like this. Following code will iterate all the blog posts under home tab. We will create placeholders in a while in umbraco portal.

 public class HomeController : SurfaceController
    {
        private const string VIEW_PATH = "~/Views/Home/{0}";
        public ActionResult RenderPostsSummaries()
        {
            var list = new List<PostSummaryModel>();
            IPublishedContent blogPage = CurrentPage.AncestorOrSelf(1).DescendantsOrSelf().Where(x => x.DocumentTypeAlias == "home").FirstOrDefault();

            foreach (IPublishedContent item in blogPage.Children)
            {
                string title = item.GetPropertyValue<string>("postTitle");
                string imgUrl = Umbraco.Media(item.GetPropertyValue<string>("primaryImageUrl"));
                string content = item.GetPropertyValue<string>("PostContent");
                if (!string.IsNullOrEmpty(content))
                {
                    if (content.Length > 200)
                        content = content.Substring(0, 200);
                }
                else
                    content = string.Empty;

                if (string.IsNullOrEmpty(imgUrl))
                    imgUrl = "http://placehold.it/750x300"; // custom image

                list.Add(new PostSummaryModel(item.Url, imgUrl, title, item.CreatorName, item.CreateDate, content));
            }
            return PartialView(string.Format(VIEW_PATH, "_postsSummary.cshtml"), list);
        }
    }

As you have already noticed, I have used a _postsSummary.cshtml partial view to render post summaries. Create a partial view and paste the following code to read the posts from the Db.

@using UmbracoDemoApp.Models
@model List<UmbracoDemoApp.Models.PostSummaryModel>
<div>
    @if (Model.Count == 0)
    {
        <div style="height:100px;" class="justify-content-center">No posts to display</div>
    }
    else
    {
        foreach (PostSummaryModel b in Model)
        {
            @RenderPostSummaryView(b);
        }
    }
</div>

@helper  RenderPostSummaryView(PostSummaryModel item)
{
    <!-- Blog Post -->
    <div class="card mb-4">
        <img class="card-img-top" src="@item.ImageUrl" alt="Card image cap">
        <div class="card-body">
            <h2 class="card-title">@item.Title</h2>
            <p class="card-text">@item.Content</p>
            <a href="@item.PostUrl" class="btn btn-primary">Read More &rarr;</a>
        </div>
        <div class="card-footer text-muted">
            @item.PostedOn
            <a href="#">@item.PostedBy</a>
        </div>
    </div>
}

As the last step update Home.cshtml page with following line of code. It will read the post summaries and render inside the page body.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
}

@{ Html.RenderAction("RenderPostsSummaries", "Home");}

We are almost done with the C# coding in Visual studio project. Next is to create place holders in home page and create couple of blog posts to show in home page.

Login to http://localhost/UmbracoDemoApp/umbraco,

go to Templates--> Master--> Create BlogHome then
go to settings --> Document Types --> Home--> Permissions --> Allow as root and add BlogHome as a Child.

Add 3 tabs for Page Title, Primary Image and for the content of BlogHome page. Make sure you name the control as you specified in the code. title, primaryImageUrl, and postContent then save.When you add controls, add reuse component tab to add a textString for title, Media Picker for image and Rich TextEditor for post content.

Now you can create blog posts under content tab. Navigate to the content tab --> Create --> BlogHome as the template --> Fill the content --> save and publish.