BlogEngine: Customize the Category Widget

Most blogging platforms provide a way to organise and display posts by category. In BlogEngine this is accomplished by means of the Category List widget or control. One of the most appealing attractions of BlogEngine is the ease with which you can extend the platform to add new features or customize existing features to suit your needs.

As an example of customizing an existing feature, lets make a couple of simple modifications to the category control that will allow us to associate images with each category. Straight out the box, we have the option to show or hide feed icons and post counts, configurable from the widget settings.

With both “Show RSS icon” and “Show post count” selected the resulting list will look something like the following, RSS icon being displayed in front of each category link and post count just after.

That’s fine and good, but what if we would like to make each category stand out as being a little more distinct or recognizable. Well, we already have feed icons in place, couldn’t we just swap those icons with icons representative of each category, as shown below.

Yes, and that would be one way of doing it.

The trade off here of course is that the feed icon(which is also a feed link), is no longer recognizable as a feed link. That might not matter if you aren’t all that bothered about showing feed links, but just in case you are, lets consider two different ways that we can accomplish the same thing.

Icon Image Replacement.

At the most basic level, we can accomplish this with just one line of code.

In folder App_Code/Controls you will find CategoryList.cs, in this file locate the code as follows replacing the commented out line with the line below it.

if (this.ShowRssIcon)
{
var img = new HtmlImage
{
//Src = string.Format("{0}pics/rssButton.png", Utils.RelativeWebRoot),
Src = string.Format("{0}feedIcons/{1}.jpg", Utils.RelativeWebRoot, cat.Title),
Alt =
string.Format(
"{0} feed for {1}", BlogSettings.Instance.SyndicationFormat.ToUpperInvariant(), cat.Title)
};
img.Attributes["class"] = "rssButton";

var feedAnchor = new HtmlAnchor { HRef = cat.FeedRelativeLink };
feedAnchor.Attributes["rel"] = "nofollow";
feedAnchor.Controls.Add(img);

li.Controls.Add(feedAnchor);
}

Here, we simply swap one image insertion method with another.

Now we need to create a new folder “feedIcons” to match the example folder and place it at the same level as the pics folder(in the blog root).
This folder should contain images for each category with names that match your category names exactly(and in this example having .jpg extension). 

For completeness, you could include a check to ensure each category image exists and if not, present a default. This is entirely optional, since any missing image would be replaced by a browser default blank serving as a reminder to add any missing images.

Finally, in your theme stylesheet(style.css). you can add any necessary CSS, for example:

#categorylist img.rssButton {
width:20px;
height:20px;
}

Add Category Classes and Style with CSS

Alternatively, in the same file(CategoryList.cs), look for the following and add the single line of code indicated.

var anc = new HtmlAnchor
{
HRef = cat.RelativeLink,

InnerHtml = HttpUtility.HtmlEncode(cat.Title) + postCount,

Title = string.Format("{0}: {1}", Resources.labels.category, cat.Title)

};

//Add the following line here
anc.Attributes.Add("class", "catLink " + Utils.RemoveIllegalCharacters(cat.Title));

Here we add a general class and also a specific class to the category link that closely matches the category name. The “RemoveIllegalCharachters” method being included to make the specific category class CSS friendly, by removing any characters such as spaces or dots that might invalidate the class name. 

With this in place you can style the category links with background images in CSS whilst retaining the option to show or hide the feed icon. 

For this approach, instead of adding the folder “feedIcons” to the root, we can add it to our theme’s image folder, for example: 

themes/MyTheme/images/feedIcons/any image files

This keeps things simple, tidy, and any added images separate.  

Then in your theme stylesheet(style.css) add the CSS classes that correspond to your category class names, for example: 

For the category list: 

Blog

BlogEngine.Net 

The CSS would be as follows:

/*General style for image links*/

#categorylist a.catLink
{
padding: 3px 0 3px 25px; /*make space for the image*/
background: url(images/feedIcons/default.jpg) no-repeat left center; /*Default*/

}

/*Specific style for image links*/

#categorylist a.catLink.Blog {
background: url(images/feedIcons/Blog.jpg) no-repeat left center;
}

#categorylist a.catLink.BlogEngineNet {
background: url(images/feedIcons/BlogEngineNet.jpg) no-repeat left center;
}
/*Note: After illegal characters are removed the class name does not include the dot*/

So there you have it, a couple of simple tips for associating images with categories in the Category List. One method, that replaces the feed icons and another that lets you keep them.

An Article By Andy McKay

Se volete seguire i post di www.informarea.it potete iscrivervi al suo feed RSS.