A new feature to display thumbnail images on blog post lists is coming in the Sueetie v3.2 Addon Pack. The Blog Post Thumbnail Addon is online at http://sueetie.com/blog. As you can see from the screenshot below, the Blog Post Thumbnail Addon displays a unique thumbnail with each blog post based on various criteria. What we’re seeing below is Post Thumbnail based on post category.
The following options are supported for Post Thumbnails.
- Author Avatar
- Image Based on the Post’s Category
- First Image Contained in the Post
- Post Attachment
- Random Image from your Media Gallery
- Default blog image (all posts will contain the same image)
Blog Post Thumbnail Examples
Examples of the various display types are below, along with helpful information on using each display type. Blog Post Thumbnail settings are located in the Sueetie Addon Pack Administration which we’ll look at in a bit.
This is useful if your community blog has multiple authors. Like all Blog Post Thumbnail types, the images are displayed automatically when the post is published, in this case, based on the post author’s Sueetie UserID. Author Avatars are located in the Sueetie Site’s Member Avatar directory: /images/shared/avatars.
Thumbnail Based on the Post’s Category
Here is an example of displaying a thumbnail based on the category of the post. Thumbnail display logic is based on the category name, reduced to only alphanumeric characters. For example, the category thumbnail filename for "BlogEngine.NET" would be blogenginenet.png. The category thumbnail for "Content Management" would be contentmanagement.png.
All category thumbnail must be .PNG image types. Category Thumbnail Filenames are Case-Insensitive. Category thumbnails are stored in /YOURBLOG/app_data/supostimages. When a post has multiple categories, the first category alphabetically is displayed. In the example below, the first two thumbnails of the Sueetie News blog are of the "Marketplace" category followed by two posts in the "News" category.
First Image Contained in the Post Option
With the First Image Contained in the Post option, when you publish your blog post the Addon scans the post content for the first appearance of the standard HTML IMG pattern:
<img src="/SOMEPATH/SOMEFILE or <img src="http://SOMEDOMAIN/SOMEPATH/SOMEFILE
The image file is processed and stored to the Blog Post Thumbnail Addon directory of /YOURBLOG/app_data/supostimages and is given the format SUEETIEPOSTID.jpg. Sueetie PostIDs are integers, so blog post thumbnails would be stored as 1.jpg, 2.jpg, etc. First Post Images are stored as .JPG files.
The Post Attachment option displays the image you attach with the BlogEngine.NET Editor’s Attach File popup feature. Post Attachments are stored in BlogEngine.NET’s file upload directory of /YOURBLOG/app_data/FILES. The Post Attachment option will not display the attachment link on the blog post either in web page format or if read via RSS. The Post Attachment must be located at the end of the post to be processed correctly. Use the BlogEngine.NET "Attach a File" function shown below.
Random Image from your Media Gallery
Below is a screenshot of using the Random Media Gallery Image option for the Blog Post Thumbnail Addon. The Addon retrieves all images for the Gallery Server Pro Media Album you select and all of its child albums. In the example below the Sueetie Themes Album is the selected Media Album for the Blog Post Thumbnail Addon. The "Themes" Album contains two child albums: Peppermint and York, so the random image collection displayed is taken from both the Peppermint and York theme albums.
One final technical point about the Media Gallery Album selection is that it must contain more than 5 images to ensure unique thumbnails per post.
Blog Post Thumbnail Administration
The Blog Post Thumbnail Addon supports multiple blogs and each blog can have different settings.
A few notes:
The Default Post Image is displayed when the anticipated thumbnail is not available. For instance, your default post image would display for categories for which you have no /YOURBLOG/app_data/supostimages/CATEGORY.png file. If you use the First Post Image option, the post thumbnail is created when the post is published, so if you were to view your blog post list while the post is in draft form, the default image would display.
The default image will display if you use either the Post Attachment or First Post Image options and the post contains no attachment. It will also display if the post was published prior to your adding the Blog Post Thumbnail Addon. To display the First Post image for existing posts you must update/save the post in BlogEngine.NET (or Live Writer.)
Post Image Height and Width affect the thumbnail CREATION size, not the thumbnail’s display size, which is set via CSS. This particularly applies to the First Blog Post Image option where the image is created dynamically when the post is published or updated.
Anchor Position refers to how the First Blog Post Image option crops the post’s first image. "Top" is the default logic, but you may wish to experiment on the anchor position that works best for you.
Media Album Selection. As said above, it is assumed the media album used is an IMAGE album. All media objects must be image types. Non-image types will not display.
Adding/Removing the Blog Post Thumbnail Addon in BlogEngine.NET
The Blog Post Thumbnail HTML is added to /YOURBLOG/Themes/YOURTHEME/ListPostView.ascx. Here is the HTML for the Post Thumbnail Feature used on the Sueetie.com News Blog. The key element is PostImageUrl. Add it along with any HTML style wrappings and that’s all you have to do!
Free and Commercial Licensing Options
At the end of the 30-Day Trial Period, if no free or commercial license has been obtained for the Sueetie Addon Pack from the Sueetie Marketplace, "Invalid License" Lollipop will appear. Commercial License Holders have unlimited features enabled in the Blog Post Thumbnail Addon (and all Sueetie Addon Pack features.) Sueetie Addon Pack Free License users are limited to the File Attachment option.