Want to use the Umbraco Tag Cloud package with version 4.5 of Umbraco? Here is the solution for you. It's just a click away.

With version 4.5 Umbraco introduced a new internal node structure. The TagCloud package works with this structure and therefore has been invalidated.

If you are new to the Tag Cloud package then at first please read the original post introducing this package.

Working with the new XML schema

To support the new structure and all future versions a new method called RenderTagsX was introduced (RenderTags is still available !). There is only one difference to the RenderTags method. The second parameter is no longer an alias rather than it's an XPath Expression to the xml structure containing the Tags.

When working with the new structure you would again pass "categories" because it's now a child node.

Related Links

• Download the package
• Umbraco Tag Cloud Package
• Umbraco 4.5 XML Schema

Debugging the Umbraco Tag Cloud package would be great. But it’s not possible and not necessary.
However, one thing is really helpful when having problems with the counted nodes. Checking which nodes are counted.

Over time I’ve got repeated mails regarding having problems with counting the nodes. The problem often was a wrong or misunderstood result of the xpath expression. The “problem” with the RenderTags method is, that it just returns a result and you have no glue which nodes where counted.

A very easy way to check if your statements counts the nodes you want to count is the following.

After your code for the cloud

It was time for an update of the Tag Cloud Package introduced with the post Tag cloud for Umbraco CMS blog package. The bug removed is about having only two tags which caused a weight of -2147483648 for one of the tags.

If you already using this package just download and replace the TagCloud.dll.

If you are new to the package read the original post about my package at the introducing post Tag cloud for Umbraco CMS blog package.

Feedback is welcome.

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>");