Tag Cloud Tutorial

16/11/2009 12:00

A tag cloud is a weighted list of tags, or keywords, used to describe the content of your web site. Tags are usually listed alphabetically, and the importance of a tag is typically shown with font size. In this article we'll show you how to make your very own tag cloud for your Enonic CMS powered web site!

Creating a tag cloud in Enonic CMS with XSLT 2.0 is fairly simple. First of all, you'll need a tag input field in your content type. This also need to be indexed. We could off course create our tags with a tag content type, but we'll just keep it simple for now using a text field in our allready existing article content type. Tags are inserted in random order, separated by commas. I.e., we've tagged this article with "Tag cloud, XSLT, RSS".

A tag cloud can be created in different ways. If you allready have a RSS feed on your website, why not use it for generating your tag cloud? All you need to do is to output your tags in different <category> elements inside a <item/>. Then you'll need a XSLT template for creating your tag cloud based on the contents in the <category> elements. Remember; only one tag pr <category>.

If you don't have a RSS, don't worry. There's an even simpler way to make it work.

The XSLT template

At first, we'll need to create a temporary result tree fragment holding all the tags. We split the tags using the tokenize() -function like this:

<xsl:variable name="items">
<xsl:for-each select="/result/contents/content">
<item>
<xsl:for-each select="tokenize(contentdata/tags, ',')">
<xsl:if test="string-length(.) >= 2">
<category>
<xsl:value-of select="normalize-space(.)"></xsl:value-of>
</category>
</xsl:if>
</xsl:for-each>
</item>
</xsl:for-each>
</xsl:variable>

The result tree fragment above is what we could have retrieved from a RSS. Anyway, the real magic of making the tag cloud lies in using the for-each-group feature in XSLT 2.0. We simply just group all matching tags together in different groups. Then we count the number of tags in each group. We use this for specifying the font size of each tag displayed in the tag cloud. A high population of tags relsults in a bigger font size. Simple as that.

<ul>
<xsl:for-each-group select="$items/item/category" group-by="lower-case(.)">
<xsl:sort select="lower-case(.)"></xsl:sort>
<xsl:variable name="url" select="concat(portal:createPageUrl($showTagsSearchPage, ()), '?search=', .)"></xsl:variable>
<xsl:variable name="count" select="count(current-group())"></xsl:variable>
<li><a href="{$url}">
<xsl:attribute name="class">
<xsl:value-of select="concat('tag', $count)"></xsl:value-of>
</xsl:attribute>
<xsl:attribute name="title">
<xsl:value-of select="concat('Search for ', .)"></xsl:value-of>
</xsl:attribute>
<xsl:value-of select="."></xsl:value-of>
</a>
</xsl:for-each-group>
</li></ul>

The last thing we need to do is to create a corresponding stylesheet (CSS) for the tag cloud. We'll give you a sample of that one as well:

a.tag1{
font-size:8pt;
}
a.tag2 {
font-size:12pt;
font-weight:200;
}
a.tag3 {
font-size:16pt;
font-weight:200;
}

That should be enough to get you started. Simply just create different CSS classes for each possible a.tag[number-of-tags-in-group]. It might be wise to define a max value in the for-each-group code sample above.