Creating a Tag Cloud

From pixyWiki

Originally from Rich Sharples Mirror World blog, here's example code for creating a Tag cloud which scales the tags and changes the opacity according to the importance. The template code relies on some CSS styles which set the font size and opacity.

<div class="tagcloud">
       #set ( $maxtags = 25)

       #set($mytags = $model.weblog.getPopularTags(-1, $maxtags))

       #set($maxtagcount = 0)
       #set($mintagcount = 99999)

       ## number of styles s1-s10
       #set($steps = 10)

       ## determine min and max tag count so we can scale the fonts and opacity
       #foreach ($tag in $mytags)
          #if($tag.count > $maxtagcount)
             #set($maxtagcount=$tag.count)
          #end 
          #if($tag.count < $mintagcount)
             #set($mintagcount=$tag.count)
          #end 
       #end

       ## generate the link for each tag assigning style accordinly
       ## the styles : s1-s10 increase in font size and opacity   
       #foreach ($tag in $mytags)
          #set ($intensity=(${tag.count}-${mintagcount})*${steps}/(${maxtagcount}-${mintagcount}))
          <a class="tag s${intensity}"  href="$url.tag($tag.name)" 
             title="$tag.count entries">$tag.name</a>
       #end
</div>

Relevant fragments from the CSS stylesheet follow, first reduce the line-height for effect. Then define s1, s2... s10, increasing the font size and opacity proportionally. The opacity requires different hacks for different browsers.

div.tagcloud>a:link {color: DarkSlateGray; text-decoration: none; }
div.tagcloud>a:visited {color: DarkSlateGray; text-decoration: none; }
div.tagcloud>a:active {color: DarkSlateGray; text-decoration: none; }
div.tagcloud>a:hover {color: black; text-decoration: none;      filter:alpha(opacity=100); opacity:1.0; }
div.tagcloud {
      line-height:18px;
}
.s1 {
     font-size:18px;
     filter:alpha(opacity=20); 
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
     opacity:.2;
}
.s2 {
     font-size:22px;
     filter:alpha(opacity=25); 
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);
     opacity:.25;
}
.s3 {
     font-size:25px;
     filter:alpha(opacity=30); 
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
     opacity:.30;
}
.s4 {
     font-size:26px;
     filter:alpha(opacity=35); 
     opacity:.35;
}
.s5 {
     font-size:27px;
     filter:alpha(opacity=40); 
     opacity:.40;
} 
.s6 {
     font-size:28px;
     filter:alpha(opacity=45); 
     opacity:.45;
} 
.s7 {
     font-size:29px;
     filter:alpha(opacity=50); 
     opacity:.50;
} 
.s8 {
     font-size:30px;
     filter:alpha(opacity=55); 
     opacity:.55;
} 
.s9 {
     font-size:31px;
     filter:alpha(opacity=60); 
     opacity:.70;
} 
.s10 {
     font-size:32px;
     filter:alpha(opacity=90); 
     opacity:.90;
}