Faded tag cloud

It’s been a little while since I posted anything techie, and a while since I posted anything that might be of use to the symfony community so I’m going to post about the exciting topic of tag clouds!

Andy has posted about tags before so read that for more information about the concepts. We’ve had tag clouds on the site since March but with the latest designs Sam wanted something a bit more stylish. Someone came across a site with a faded tag cloud where colour rather than size determined the weight of the tag so Sam built that into the new designs.

We use a symfony plugin catchily called sfPropelActAsTaggableBehaviorPlugin which allows us to add tags to any object taken from the database (e.g. courses, events, news articles). The plugin also has some functions to output tag clouds for different types of objects and it’s this we used on the old site.

For the faded tag cloud I was planning to implement it from scratch but then wondered if it was possible to do something with the existing taggable behaviour plugin. It was, and here’s how!

Firstly we modify the output of the getPopulars() function to sort by weight:

$c = new Criteria();
$c->add(TagPeer::IS_TRIPLE, false);
$c->add(TaggingPeer::TAGGABLE_MODEL, 'newsArticle');
$c->setLimit(isset($this->limit) ? $this->limit : 30);
$this->tags = TagPeer::getPopulars($c);
arsort($this->tags);

Then in the template we simply output the tag cloud as normal:

<?php use_helper('Tags'); ?>
<?php echo tag_cloud($tags, '@news_tag?tags=%s'); ?>

This will produce a cloud where the size determines weight of tag with the largest at the top, which isn’t what we want, but the clever stuff can be done with CSS. The plugin produces an unordered list with <big> and <small> tags used to change the size of the tags. We use the following CSS to remove the font size styling and apply color (sic) to the text:

ul.tag-cloud li big big,
ul.tag-cloud li big,
ul.tag-cloud li,
ul.tag-cloud li small,
ul.tag-cloud li small small{font-size: 103%}
ul.tag-cloud li big big a {color: #EFEFEF}
ul.tag-cloud li big a {color: #BFBFBF}
ul.tag-cloud li a {color: #8F8F8F}
ul.tag-cloud li small a {color: #5F5F5F}
ul.tag-cloud li small small a {color: #3F3F3F}
ul.tag-cloud li a:hover{ color:#fa0}

That’s about it – a nice easy way to produce good looking tag clouds thanks to the wonders of symfony and CSS.

4 replies on “Faded tag cloud”

  1. Nicely done Mike! The graphical result is very interesting! For my own culture, at what scale are you using tags ? (10000+ tags or less ?)

  2. We currently have around 800 tags and 5,000 taggings but most of those have been added since March – we’ve not gone back through the archive to tag old news stories.

Comments are closed.