Every major website seems to have a tag cloud. Users love tag clouds; they help navigate masses of content quickly and easily. When used appropriately, they help us sort filter through information stores, reduce the signal-to-noise ratio. Providing a tag cloud is also relatively painless for the server - after all, it’s just some HTML. But how do we actually build a tag cloud at application level? In this tutorial, I’ll take you through putting together a full-blown, calculated web 2.0 tag cloud in PHP.

First, let’s look at what we want to end up with. We’ll take this data:

PHP: 30 items
JavaScript: 24 items
Java: 17 items
Python: 26 items
Ruby: 17 items

And we want to end up with this tag cloud:

php javascript java python ruby

To do this, we need to first examine what a tag cloud is like at HTML level. Each of these tags needs to be wrapped in an element that can have a style attribute. We’ll use that to set a font size. We could use either percentages or pixels; both have advantages and disadvantages. In this tutorial, we’ll do something like this:

<a href="#" style="font-size: 40px">php</a>
<a href="#" style="font-size: 30px">javascript</a>

We’re using anchor tags so that we can later link them as needed.

So let’s start with our data. The above tag cloud was generated with this array:

<?php
$tags = array('php'=>30, 'javascript'=>24, 'java'=>17, 'python'=>26, 'ruby'=>17);

The next step in a tag cloud is calculating those font sizes. We need to define a minimum and maximum value for that font-size CSS parameter, so that we always know what sizes we’re dealing with. We then calculate the minimum and maximum values from the entire data set - array_values() will help us sort out the data - and the difference between these, the spread of the data.

<?php
$maxsize = 30;
$minsize = 20;
 
$maxval = max(array_values($tags));
$minval = min(array_values($tags));
 
$spread = $maxval - $minval;

Finally, we work out a “step”, or an increment value for each level of items. This step will be calculated based on the difference between minimum and maximum font size, divided by the spread. This gives us a relationship between number of items and pixels for font size.

<?php
$step = ($maxsize - $minsize) / $spread;

We can then work out the font size as the difference between the number of items for the current item and the lowest number of items (the minimum) in the set, multiplied by the step. This gives us the value of the font size of the current item in relation to 0. Finally, we add the minimum font size value for some width.

<?php
round($minsize + (($value - $minval) * $step));

Let’s take an example for a second. Take a new dataset, with javascript 5, php 6 and java 7. Our minimum font size is 20 and maximum size 30. Therefore $minval is 5, and $maxval is 7. Our $spread is 2, or 7-5. Our $step is ($maxsize - $minsize) / $spread, giving us 10 - 2 or 5. This means there is 4 pixels difference between each of our three values. PHP’s value would be calculated like this:

<?php
round($minsize + (($value - $minval) * $step));
round(20       + ((6      - 5)       * 5));

This gives us 25, or 25 pixels. It’s quite simple, really. Let’s put all this code together, including a simple loop to run over each of the tags and spit out the HTML within a function:

<?php
function tag_cloud($tags) {
    $maxsize = 40;
    $minsize = 20;
 
    $maxval = max(array_values($tags));
    $minval = min(array_values($tags));
 
    $spread = $maxval - $minval;
 
    $step = ($maxsize - $minsize) / ($spread);
 
    foreach ($tags as $key => $value) {
        $size = round($minsize + (($value - $minval) * $step));
        echo '<a href="#" style="font-size: '.$size.'px">'.$key.'</a> ';
    }
}
 
$tags = array('php'=>30, 'javascript'=>24, 'java'=>17, 'python'=>26, 'ruby'=>17);
 
tag_cloud($tags);

And we’re done! A simple yet powerful PHP script to generate a web 2.0 tag cloud for your website.

Bookmark It

Hide Sites

Akash Mehta in PHP | on Friday, May 2nd, 2008 at 6:00 am.
RSS 2.0 | Leave a response | Trackback