Technical Overview of BlogEngine.NET Post Thumbnails

The Upcoming Sueetie v3.2 AddonPack includes a Blog Post Thumbnail Addon which displays post thumbnails by several criteria.  Options are Post Category, Random Image from a Gallery Server Pro Media Album, Post Attachment, Author Avatar, or the first image found in the post content. Here’s a screenshot of Post Thumbnails on the Sueetie Blog using the post category option.

I thought it would be interesting for fellow BlogEngine.NET aficionados to broad-stroke the Post Thumbnail architecture.

Post Thumbnail Properties

First, here’s the Sueetie Addon Pack Post Thumbnail administration page which shows the various properties of the Addon.  Post Image Type sets the display option by way of a PostImageType enumerator and is key in our thumbnail logic.

Adding Thumbnail HTML to BlogEngine.NET

The HTML to add Thumbnails in a BlogEngine.NET theme is circled below. We’re merely displaying a PostImageUrl property with some CSS wrappings.

New Base Class File

A guiding principle of app customization is to change as few lines in the original source as possible. PostViewBase has no PostImageUrl property, of course, so rather than add code to PostViewBase we add a new Base Class in our external Sueetie.AddonPack library. 

Post Thumbnail Display Handler

If we’re using the Gallery Server Pro Random Image option for our post thumbnail, we’ll create the Url here in the AddonPackBlogPostControl Base Class.  For other thumbnail display options—first post image, post category, author avatar and post attachment—we pass on the blog and post Sueetie IDs to a postimagehandler.ashx which generates the image url on the fly based on the blog’s PostImageType property.

A Few Lines of BlogEngine.NET Extension Code

That covers how we display the thumbnail. The only logic remaining is how and when we create the thumbnail when using the First Post Image option, where the first <IMG SRC= /> image becomes our post thumbnail.

Thanks to BlogEngine.NET’s Extension Architecture we can create an extension to create our thumbnail on the Post.Saved event.  Sueetie is already using a BlogEngine.NET Extension to save the post to Sueetie’s Data Core, so we’ll add a few lines of code to our existing SaveSueetiePost Extension to create the post’s thumbnail.  The Thumbnail is saved in ~/app_code/supostimages as a .JPG with the Sueetie PostID of the SueetieBlogPost object.  1.jpg, 2.jpg, etc… 

Sueetie Version 3.2 with the Blog Post Thumbnail Addon should be available in a few weeks. For more information about the Addon, here’s the Sueetie Wiki Addon Guide.

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.