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. For steps to create a simple Tag cloud, see our macro reference.

<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;
}