BE Theme Tip: Adding default images for each category

-   Jul 28, 2009 -   BlogEngine.NET, Development -   ,

When I looked around at blog templates on different sites, I’m running across more and more templates that expect each post to have an image or two with it in the display template.  I think it looks great, but I also think I would post even less if I had to have images in the certain sizes for each and ever post I wanted to make.

In thinking about it however, I decided it would work out pretty well for me if I picked out an image for each category and let my theme put the correct image into the template as needed.  In my theme, I have only 2 image sizes and there are different enough that I decided to make images for both sizes, but if they were more similar, you might be able to get away with a single image and resizing it on the fly.

Since these images are part of how the post is displayed, the work for this is part of the PostView.ascx of your theme.  I used the code behind file for this as well and added the following into my custom PostView class.

   1: protected string CategoryImage;
   2: protected string FeaturedImage;
   3: protected void Page_Load(object sender, EventArgs e)
   4: {
   5:string imageRoot = Utils.AbsoluteWebRoot.ToString() + 
   6:"themes/myTheme/images/categories/";
   7:string catImageName;
   8:if (Post.Categories.Count > 0)
   9:         catImageName = Post.Categories[0].Title.Replace(".", "");
  10:else
  11:         catImageName = "NoCategory";
  12:
  13:     CategoryImage = imageRoot + catImageName + ".jpg";
  14:     FeaturedImage = imageRoot + catImageName + "Featured.jpg";
  15:  
  16:base.Page_Load(sender, e);
  17: }

Now I had a CategoryImage and FeaturedImage url string that I could use in my PostView.ascx to show the correct image for each post.

   1: <img src="<%=CategoryImage %>" alt="<%=Server.HtmlEncode(Post.Title) %>" />

It is a relatively simple trick, but gives you some neat customization on your blog.  This concept can be used to do countless customizations to the PostVIew, CommentView and even the Site.Master pages in your theme.

4 Comments

David Miles
Commented on 7/31/2009 4:11:32 PM
I do something similar - but I return the whole image tag from my properties - this allows me to have categories without images - in which case the returned value is just an empty string ...
Commented on 8/10/2009 9:32:28 AM
Al ... I am making some tests with a couple of modifications I did to the IPublisheable object in order to store a string that has the src of the first image of each post. My blog only contains posts with images that I store in SmugMug. SmugMug allows me to query for a different size of image just adding a size to the url like image-80x80.jpg. Have a look to the result at my blog http://www.alfaku.net where every post has an identifying image... I also did my own experiment where post lists can be 'mutable' and different from the post view.
Commented on 8/11/2009 6:10:03 AM
Your site looks great Hector.  Nice work.

I thought about adding a specific image to each post, but I thought I would post even less if I had to find a picture for each post. Smile
Commented on 8/23/2009 11:24:31 PM
Yeah, I agree. Blog themes these days look so nice and shiny on the demo page - but to function properly and look nice, you have to attach a picture for every single post. Having a default works well, but I think is only an acceptable solution as a tempopary measure as you run around resizing photos and attaching them, as I was to my WP blog last night.
Comments are closed