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
Java: 17 items
Python: 26 items
Ruby: 17 items
And we want to end up with this tag cloud:
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:
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:
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.
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.
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.
And we're done! A simple yet powerful PHP script to generate a web 2.0 tag cloud for your website.