The Blog Post Thumbnail Addon adds several image options to your blog post lists. The Blog Post Thumbnail Addon is included in
Sueetie Premium Edition.Color and Context in your Blog Post Lists¶
The Sueetie Addon Pack Blog Post Thumbnail Feature displays an unique thumbnail with each blog post lists based on the criteria you chose. You can display the following post-specific types of 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 thumbnail 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.
Author Avatar
This is useful if your community blog has multiple authors. Like all Blog Post Images types, the thumbnails 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 filename for "Content Management" would be
contentmanagement.png.All category images must be .PNG image types. Category Image Filenames are Case-Insensitive. Category Images are stored in /files/blogs/BLOGAPPID/categories. 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
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 /files/blogs/BLOGAPPID/thumbnails and is given the format SUEETIEPOSTID.jpg. Sueetie PostIDs are integers, so blog post images would be stored as 1.jpg, 2.jpg, etc. First Post Images are stored as .JPG files.
Post Attachment
The Post Attachment option displays the image you attach with the BlogEngine.NET Editor's Attach File popup feature. Post Attachments are stored in /YOURBLOG/app_data/FILES. The Post Attachment option will not display the attachment 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 images per post.
Blog Post Image 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 no anticipated image is available. For instance, your default post image would display for categories for which you have no /files/blogs/BLOGAPPID/categories/CATEGORY.png file. If you use the First Post Image option, the post image 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 image CREATION size, not the post 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 Image HTML is added to
/YOURBLOG/Themes/YOURTHEME/ListPostView.ascx. Here is the HTML for the Post Image 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!
JQuery plugin support for Lightbox Display
Using jQuery with Blog Post Thumbnails is supported in Sueetie v3.3. It applies the new SueetieMediaObject properties introduced in Sueetie v3.2 to the Blog Post Thumbnail Addon. You can see this in action on my personal Sueetie site at
http://dbvt.com.Thumbnails, as most Gallery Server Pro media outside of the media application, are displayed using the GSP Photo Display handler. This works great, though jQuery doesn't play nicely with photohandler.ashx generated images. We're using the actual image file paths, making client-side effects possible.
We typically use the
PostImageUrl Blog Thumbnail property to display the image. This uses the GSP Photo Handler .ashx. The approach to client-side thumbnails is a bit different. Here we're populating an HTML string to satisfy the requirements of our plug-in. That property is
PostGalleryImageHtml. 
The HTML string we're populating is found in the Sueetie AddonPack.xml Language file.
This formatted string takes two PostGalleryImage object elements: OptimizedImageUrl and ThumbnailImageUrl.
Here's an example of the end result using DBVT.COM's support for the Ceebox Lightbox plugin.
Media Gallery Images by Album Path Option
The Media Gallery Images by Album Path Option is coming in Sueetie v3.3. The Album Path Option is provided so that you can retrieve images outside of the usual album hierarchy structure. Let's take a look at my personal Sueetie site at
http://dbvt.com. I want to display seasonal blog thumbnails from my media gallery. At the time of this writing it's a hot summer day in Vermont and so I want to display photos from all "Summer" child albums in my "Walking the Dog" album.
Let's look at the album paths in the SQL table Sueetie_gs_Albums. I'll be using the Album Path Option to retrieve photos from all Gallery Server Pro albums whose path starts with "/Walking the Dog/Summer." Since all Walking the Dog/Summer albums are structured the same we'll now be able to view photos from all Summer albums.
Configuring the Album Path Option
You select the "Random Media Gallery Image" as you would normally. Rather than selecting an album with its child albums, a new item has been added to the Media Gallery Album Selector in Sueetie Addon Administration. Select "Fixed Album Path" option. Then enter your album path root in the field provided. The album path's base is your /media/gs/mediaobjects folder.
Product Keys and Feature Freedom¶
At the end of the 30-Day Trial Period, if no product key has been obtained for the Sueetie Addon Pack from the Sueetie Marketplace, "Invalid License" Lollipop will appear.
Top