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

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.

Tag me

Tags are being used by more and more websites. They’re everywhere. Look at the top of this post, its been tagged (by me). Look to the sidebar, a tag cloud (more about these later). Chances are if you use any social networking site or web 2.0 site, you’ll have used, seen and interacted with tags.

Our new-look corporate site, extensively uses tagging, specifically in News, Events, Imaging and the eProspectus, but what’s a tag used for? A tag is metadata, a keyword or term associated with or assigned to a piece of information. So tags can be added to any page in a web document and associated with any other pages prieviously tagged with the same tag.

The tags themselves are usually single words, informally and personally chosen. If you’ve signed up for accounts with Flickr, Picasa, delicious, Magnolia or YouTube, to name but a few, you’ve probably added your own tags by now. So is tagging just a way to show similarities between your documents? Not really, tagging data on these sites provides a simple navigation through to your own content, but also hooks into other members’ data by turning tags into links, which aggregate documents similarly tagged.

Tag Clouds

Tag Cloud

Popular tags can be visually represented through tag clouds, also known as a weighted list, with the most popular tags shown larger and bolder. Again the tags are links which drill down to similar content. You could even base an rss feed on a tag to alert visitors to new content so tagged.


Microformats logoBy adding rel=”tag” into the links, the link also becomes a microformat. Microformats are a standard way to represent things in HTML, by adding rel-tag we’re standardising the link as a tag. Making the link a microformat allows the reader to find similarly tagged content from a wider source than just the current site. Firefox users can install a fantastic add-on called Operator. Operator recognises microformats on the page and in the case of tags, offers the reader entry points to content similarly tagged on other websites. Sadly there doesn’t seem to be anything similar available for Internet Explorer, yet.

Machine Tags

On the horizon, we have Machine tagging or Triple tagging. Machine tags use a specific syntax to define extra information about the tag, making it more meaningful for interpretation by computer programs. Triple tags comprise three parts: a namespace, a predicate and a value. For example, ehu:news=607This kind of tagging isn’t currently used on the Edge Hill site, but it’s built-in ready to go. Anyone interested can see an implementation on Adactio, any Flickr images, tagged ( where n is representative of his blog post) will be included automatically.adactio:post=n

Adopting Tags

By adopting tags, or creating tags so unique, ensures that all things tagged are related. For example, all news, event and images relating to this year’s Solstice Seminars could be tagged: solstice08. The tag is so unique, items tagged with it would be unlikely to be included out of context. Such unique tags can be promoted like a product, by requesting conference attendees to tag their own online content, on websites and slides etc.

Tagging Best Practices

If you’re about to embark on a journey of tagging for your own sites, it can feel a little daunting. There are, however, some best practices you can use to get started: