Adding a summary to Orchard blog posts

One of the things I like about ths blogs hosted at MSDN is that the blog owner can elect to have something different displayed under each post in a listing, instead of the CMS just taking the first N words / M characters and slapping a "read more" link on the end. This means that, for those that want to make the effort, each post can have a sub-title / snappy phrase that describes it. It doesn't even appear in the view of the posting itself (though I'm sure that's something that can be changed?)

Here's a post from that blog, showing the list view version

And here's the top of the post itself

Because (a) I want it for my blog, and (b) It gives me another opportunity to dig into Orchard and get a handle on how its composed, I decided to try adding the same feature to my blog. This is the story of how I went about it (which of course means if you have an Orchard blog, you can do the same). It's not necessarily the best way, it might use bits of Orchard in a naive way, but it works on my machine!

Adding a "Summary" field to blog posts

The route I decided to go down, there may be others, was to add a new field named Summary to the Blog Post content type. This is pretty quick and easy to do, and also means that the loading/saving/editing of the summary is all taken care of for me by Orchard. Doing this is a matter of logging into the /Admin portal, going to the "Content Definition" part of the site from the left-hand side menu, finding "Blog Post" in the list of Content Types and clicking the "edit" link to the right. This brings up all the metadata for the Blog Post content type, and is also where the new field will be added! So, click the "Add Field" button and then fill in the details:

Once you've done that, and clicked on "Save", you'll be returned back to the "Edit Content Type" page. From here, we can make a couple more tweaks to the Summary field by clicking on the arrow next to it to expand the details and tweaking the "Display options" and "Help text". I've set my Display options to "Large", because otherwise you get a field to type your summary into that's the same size as the "Technical Name" field in the screenshot just up above, now summaries should be short - but not that short! Equally, you could set it to "Textarea", but that feels like an excuse to write too much. I've also dropped a bit of exposition into the Help text of "Give a summary of this post, keep it short as it'll be displayed in post listings", that should remind me not to write song and verse in the summary field! Then, scroll all the way right down to the very bottom of the page, below the "Parts" section, and click "Save".

That's it, done. All your blog posts now have an optional, unless you checked "Required", Summary field that you can populate to your hearts content. That's great, but it's not actually going to be displayed anywhere, other than in the Blog Post editing page, like the one for this very post:

Making the Summary field show up, in recent post listings

This is where a bit of code is un-avoidable (again, there may be other ways to achieve this, some of them may require you to not write any code at all!), but that's actually pretty easy and means that the "recent post" listings go from looking like this:

To this:

For that screengrab, I have been lazy and copied the first paragraph of the recipe post into the summary field, but, as you'll see for this post, it's not smoke and mirrors at work to achieve this.

I'm using the "PJS.Bootstrap" theme for my site, for which I have a fixed up version that works against Orchard 1.10.x on GitHub. I'm also using a custom theme, which derives from / depends upon PJS.Bootstrap (again on GitHub) and it's in the custom theme that I'm going to make the changes to show the content of the summary field, where present. The first thing I did was copied the file Views\Parts.BlogsRecentBlogPosts.cshtml from PJS.Bootstrap into my theme, in the same location. Then it's a relatively simple matter to extract the content of the field. I've been very very lazy here and assumed that if there is one and only one field, it will be the "Summary" field and will be an instance of Orchard.Core.Common.Fields.TextField and therefore have a string Value property I can extract content from. This is a big old assumption, but one that works right now and I will tidy up in time!

So, into my already existing view, I've added some code to check for the presence of the field, grab its content and then write it into the output:

var summaryText = post.ContentItem.BlogPost.Fields.Count > 0 ? post.ContentItem.BlogPost.Fields[0].Value : string.Empty;

<li>
    <h5>
        @Html.ItemDisplayLink(title, contentItem)<br />
        @if (!string.IsNullOrWhiteSpace(summaryText))
        {
            @summaryText
            <br />
        }
        <small>@T("Posted") @date.ToShortDateString()</small>
    </h5>
</li>

I've highlighted the bits I've added, so if you're not using the same theme as me, you can work out which bits matter. Lilke I said, the code is far from fully robust, but it shows how to achieve the outcome I'm after!