Development Seed Blog

Getting Tag Storm Compatible, Lined Up, and Working with Drupal

While I was redesigning our website, I decided to redo our blog’s tag cloud. I wrote an override to the default tagadelic theme function that added randomized positioning to each tag using inline CSS. Once overlayed on a nice background image our new tag cloud, aka tag storm, came into being.

The only problem left was getting it to work in Internet Explorer. I had suspected that I may have to downgrade the skin to get it working in IE, but for once the opposite happened – IE made it better.

If you look at the image above or at the tag cloud on our blog you’ll see that the tags are spread evenly throughout the space and most of the tags are only slightly obscured by other tags. But at first tag storm behaved pretty erratically, sometimes stacking all of the tags on top of each other in a usability mess, like this.

This was a side-effect of the theme function I had written - the function placed words across an evenly spaced grid and offset them by a random number of pixels. The problem was that the grid was evenly spaced but not all tags were the same size. A long word like "Internationalization" or a highly weighted word like "Drupal" would "overflow" the allotted space on the grid, obscuring other words.

Collision Detection is Built into Your Browser

So what happened? Did I write some sort of crazy collision detection algorithm? Nope, I didn’t need to thanks to IE.

The original tag storm would have worked in IE, except for the fact that our website has a fixed footer. In IE, you can only have a fixed footer by triggering a specific IE bug, which has the drawback of messing up any other elements on the page that are absolute or relative positioned. So I started looking for a way around this.

That’s when I realized that the solution to this problem was already built into the browser. Browsers already do collision detection. It happens when they display any normal sentence - each word is placed after the next, without any overlapping or obscuring (for you CSS geeks, I'm talking about display:inline). Add to this behavior just a little bit of randomness, like offsetting to the top or bottom and to the left or right by a few pixels, and what is usually a pretty orderly block of text becomes a tag storm. Because it uses a built-in behavior in the browser, the tag cloud still works in IE for websites with fixed footers.

The best part is that this method is far more usable - tags are evenly spread, somewhat chaotically randomized, and tag storm’s usability no long totally tanks.

There was one outstanding problem with this solution. Because the browser thinks of this group of tags like a "paragraph" it wraps lines. This is generally a good thing, but in this case, it left an obvious margin on the left and right of the tag cloud (I've centered the text here).

However, there’s a simple solution. I put a container inside our main tag cloud "window" and let it extend past the "frames." Using a little overflow: hidden, the lines of text extend a bit longer than they used to, pushing past the edges of the box.

Implementing Tag Storm in Your Own Drupal Theme

Implementing your own version of tag storm in Drupal is pretty straightforward. First, you need a custom function in template.php to override tagadelic's theme function. All this function will do is add a CSS class randomly to each tag to give our theme something to hook into to randomly offset tags. In this case I've called the tag "opacity" since our theme also modifies the opacity of tags to make the most popular ones visually pop.

function devseed_tagadelic_weighted($terms) {  foreach ($terms as $term) {    $opacity = rand(1,10);    $output .= l( ucfirst($term->name), taxonomy_term_path($term), array('class'=>"tagadelic level$term->weight opacity$opacity"));  }  return '<div class="tag-storm"> <div class="tag-inner">'.$output.'</div> </div>';}

This code has been simplified, but you get the idea. You can also see that we wrap the tags in two containers - the outer "mask" and the inner "window."

Next you'll want to add some CSS for your custom tags - in this case we used opacity1 - opacity10 classes and the outside containers:

.tag-storm .opacity1 { filter: alpha(opacity=15); opacity:.15; margin-right:-10px; margin-bottom:-15px;}.tag-storm .opacity2 { filter: alpha(opacity=20); opacity:.3; margin-right:-5px; margin-top:-10px;}/* ... etc. ... */.tag-storm .opacity10 { filter: alpha(opacity=99); opacity:.99; margin-left:-5px; margin-top:-5px;}.tag-storm { background:#fff; text-align:center; word-spacing:2px; overflow:hidden; width:415px; height:auto;}.tag-storm .tag-inner { width:455px; margin:0px -20px;}

Note that I've chosen these pixel offsets randomly - they simply add to the organic appearance of the tag cloud. You can see some other details - overflow:hidden on .tag-storm as mentioned before and word-spacing:2px to put a little breathing room around the tags. Also note the negative margin on .tag-inner. Without it the inner container will only overflow to one side of the wrapper rather than to both sides.

One last note: Firefox actually will not render a negative margin-top or margin-bottom on inline elements. To get this effect you will want to use display:inline-block on your tags. But this CSS attribute is actually only supported by IE at the moment. For once Firefox might have to play a little catch-up : )