Tag cloud Portlet

From Sense/Net Wiki
Jump to: navigation, search
  • 100%
  • 6.0
  • Enterprise
  • Community
  • Planned


Tag Cloud Portlet
The Tag Cloud Portlet is a portlet for rendering the Tags in the system as a TagCloud.


Without parameters:
The portlet lists every tag in the system and shows it in different sizes depending on occurency. The more the tag used on a content the bigger it is in the TagCloud. By clicking on a tag in the cloud you will be redirected to the search page related to that tag.
With specific search paths given:
The portlet acts the same, except that only content under the selected paths will be examined for tags.
With specific content types given:
The portlet acts in the same way, except that only given types of content will be examined for tags.


The following properties can be configured of the portlet:

  • Tag search portlet path - Tha path of the corresponding search portlet. If given, this portlet will be used for searching when a tag is clicked from the cloud.
  • Search paths - Only tags under these paths will be populated. (separate with commas)
  • Content Types - Only these content types will be examined for tags. (separate with commas)
  • Including descendant types - The listed content types and descendants will be examined

Here below you can see the editable properties of this portlet:

Tag Search Portlet Properties

User group informations

for End users

How to use

After you added the portlet to your page, beside the common settings you can set some additional options as well:

  • Search path: only tags under these paths will be populated (you must separate paths with commas)
  • Content types: only these content types will be examined for tags (you must separate types with commas)
  • Including descendant types: the listed content types and descendants will be examined

for Portal builders

The portlet is using plain html and css, no flash needed.

For showing the tags in different sizes we use 10 different css classes, from .tag1 (smallest) to .tag10 (biggest). Classes are the following:

div.snTagContainer .tag1{font-size:80%;}
div.snTagContainer .tag2{font-size:100%;}
div.snTagContainer .tag3{font-size:120%;}
div.snTagContainer .tag10{font-size:260%;}

These CSS classes are assigned to the different elements in the TagCloudPortlet.ascx

// /Default Structure/System/System Plugins/Portlets/TagCloud/TagCloudPortlet.ascx
<asp:Repeater ID="TagCloudRepeater" runat="server">
<div class="snTagContainer">
        <li class="tag<%# Eval("Value") %>">
            <a href="?action=SearchTag&TagFilter=<%# Eval("Key") %>"><%# Eval("Key")%></a>

You can notice several things here.

  • First is that we use a Repeater to list every Tag, which ItemTemplate assignes the corresponding css class to the actual tag item, by using an eval. (Details below.)
  • Second is the search url syntax that we are using for getting to the content listing belonging to the tag.
  • Third is that we are using an another Eval for getting the current Tag’s name.

PageTemplate embedding code


HTML fragment for skining

for Developers

We did a data binding here:

// ~Core Portlets/Controls/TagCloudPortlet.ascx.cs
protected void Page_Load(object sender, EventArgs e)
this.TagCloudRepeater.DataSource = TagManager.GetTagClasses();

This binds our code below to the Repeater - we have in the ascx:

// ~Core Portlets/TagManager.cs
public static List<object> GetTagClasses()
     var classes = new List<object>();
     var occ = GetTagOccurrencies();
     int maxCount = 0;
     foreach (var o in occ)
         if (o.Value>maxCount)
             maxCount = o.Value;
     foreach (var oc in occ)
         float tepmValue = ((float)(oc.Value) / (float)(maxCount))* 10;
         int value = (int)(tepmValue);
         classes.Add(new {Key = oc.Key, Value = Math.Max(value, 1)});
     return classes;


The code above does two things. The most important it makes a list from the tags located in the system as Key-s and the other is it calculates a number between 1-10 and adds it to the tag as the Value. In other hands the Key is simply the name of the tag and the Value is the occurency index of the tag. When evaluating (<# Eval(„Key”) ... ) these stuffs at server side we just do a substitution to the corresponding places. So if we have a tag named „Hello” with 4 occurrencies we will have rendered something like this:

<li class="tag1”>
            <a href="?action=SearchTag&TagFilter=Hello">Hello</a>

Another important thing to mention is that the TagCloud uses all the space it can access. So as far it’s usual to use it in a side column like LeftCol or RightCol, you are pleased to use it even in a WideCol or MiddleCol. The TagCloud will fit to the whole space. If the Portlet is placed at one of the side columns and if a tag „runs out” from the cloud a javascript function shortens the tag’s rendered name and replaces the last characters with dots, so it will fit properly. This shortening only happens at side columns where more space is needed.

for System operators


Related links