This is a fun and easy little mod that displays a thumbnail image with a blog post. Unlike the mouseover mod I recently added to dbvt.com which pulls a random image from my photo gallery, this mod displays a specific image associated with the post. The key to the simplicity of the mod is that the image is the post's attachment.
We're adding a new "thumbnail" property to our custom Community Server WeblogData control. You'll notice that I'm using a custom DBVTConfiguration (as a supplement to CSConfiguration) model to store the default thumbnail for posts that do not include a thumbnail attachment.
case "thumbnail":
DBVTConfiguration dbvtConfig = DBVTConfiguration.GetConfig();
string imageUrl = string.Format("<img src=\"{0}\" border=\"0\" />",
dbvtConfig.DefaultThumbnailUrl);
if (!post.HasAttachment)
return imageUrl;
if (!post.Attachment.ContentType.StartsWith("image"))
return imageUrl;
imageUrl = string.Format("<img src=\"{0}\" border=\"0\" />",
BlogUrls.Instance().AttachmentUrl(post.Weblog, post.Attachment));
return imageUrl;
Then we modify our postlist page ItemTemplate to display the thumbnail.
<ItemTemplate>
<li class="CommonListRow">
<div class="BlogPostThumbnail">
<DBVTControl:WeblogPostData ID="WeblogPostData3"
runat="server" Property="Thumbnail" />
</div>
<div class="BlogPostArea">
<h4 class="BlogDirectoryPostHeader">
<DBVTControl:WeblogPostData ID="WeblogPostData1"
runat="server" Property="Subject" LinkTo="Post" />
</h4>
<div class="BlogPostContent">
<DBVTControl:WeblogPostData ID="WeblogPostData2"
Property="Excerpt" runat="server" />
</div>
</div>
</li>
</ItemTemplate>