A view weeks ago I created the list of categories for my blog. After a while I was wondering if a tag cloud wouldn't be more intuitive and more fancy. Of course it is.

So I started to create my first Umbraco package. But before creating the package the cloud itself must be implemented.

The Tag Cloud

To get an idea what a tag cloud is and what it's based on have a look at Wikipedia.

Algorithm

There are a lot of posts and notes about tag clouds and how to calculate the weight of the tags. After reading a lot of these articles and trying some solutions myself I kept these two posts in mind.

• In Search of the Perfect Tag Cloud
• Tag Cloud: Algorithmus für Schriftgröße

As a result I use an logarithmic algorithm which should be fast enough and the quality of the result should be ok. Most of the posts are talking about calculating the font size, but I just calculate the weight of the tag. The font size (or color) itself is provided using stylesheets which provides a very wide range of displaying the tag cloud.

Appearance

As already mentioned this package only calculates the weight. So the appearance can be set using stylesheets. In this context the color, font size and weight are interesting. To get a usable tag cloud some points must be considered:

• The different weights must be visual distinguishable.
• At least when moving the mouse over a tag it should get an underline to see what's the whole name of the tag (See "ASP.NET Dynamic Data").
• The tags should appear in alphabetical order which is done automatically.

 
Example of one tag cloud (6 weights) using different appearances. Just fonts, Just color and a combination where 3 font sizes and 6 colors are used.

The Package

The Umbraco package is a very simple package containing

• the dll with the calculation and rendering logic
• an xslt file called TagCloud.xslt (at least the link to the aspx page must be corrected in this file)
• a macro called TagCloud

Usage

As you can see in the XSLT file which is part of the package just call the Method RenderTags().

string RenderTags(XPathNodeIterator nodes, string propertyAlias, string entryPattern, int nrOfWeightRanges)

• nodes: The nodes containing the tags to count.
• propertyAlias: The alias of the dynamic property containing the tags. In the default installation of the blog package the alias is "categories".
• entryPattern: The pattern used for rendering the tag. 
  Sample: <a href="blog.aspx?filterBy={0}" class="tc{1}" title="{2}">{0}</a>
  There are three placeholders available:
  • 0: The tag text (used for link text and the url)
  • 1: The calculated weight (here used for setting the stylesheet class)
  • 2: The amount of occurrence (here used for displaying as tooltip)
• nrOfWeightRanges: With this parameter you can set how many weight ranges should be used. Having the problem with the distinguishableness in mind this should be at most a value of 5 or 6.

To get the appearance working you have to add classes for each weight in the stylesheet according to the number of weight ranges.

a.tc1 { font-size:100%; text-decoration:none; }
a.tc2 { font-size:110%; text-decoration:none; }
a.tc1:hover, a.tc2:hover { text-decoration:underline; }
...

Download

You can download the TagCloud Package here.

Usage outside of Umbraco

This package is not restricted to be used within Umbraco. Just add a reference to TagCloud.dll into your project and use the TagCloudCalculator class.

// create an instance of the TagCloudCalculator class
// passing the nrOfWeightRanges as parameter
TagCloudCalculator cloud = new TagCloudCalculator(6);
foreach(string tag in myTags) {
  cloud.Count(tag);
  // use this call if you already know the count
  // cloud.Count(tag, count);
}
string html = cloud.Render(@"<a href=""blog.aspx?filterBy={0}"" class=""tc{1}"">{0}</a>");