February 24, 2021
Hot Topics:

Create Tag Clouds with the Zend Framework's Zend_Tag_Cloud Component

  • By Jason Gilmore
  • Send Email »
  • More Articles »

A great way to empower online customers while conveniently reducing the burden of organizing your company's website is by providing a mechanism for tagging online content. Tagging allows customers to choose terms that best describe a particular product, blog post, or service, and then you can organize those tags in such a way that other customers can use them to navigate the website. Such navigational features are known as tag clouds, and you'll find them popping up everywhere, including sites such as Amazon.com (see Figure 1).

Amazon.com's Great Product Tagging Feature
Figure 1. Amazon.com's Great Product Tagging Feature

In this tutorial I'll show you how to create your own tag clouds using the Zend Framework's Zend_Tag_Cloud component, which you can use to tag up every conceivable part of your website, from products to blog posts. This component is a native part of the Zend Framework, meaning if you already use the Zend Framework to power your website, integrating tag cloud capabilities will be trivially easy.

Creating a Tag Cloud

You can generate a tag cloud by passing a multidimensional array to the Zend_Tag_Cloud constructor. Each associative array found in the multidimensional array will represent one tag, consisting of a tag title, URL (which the tag should point towards when the URL is linked) , and a weight, which indicates the frequency of the tag's use as related to other tags in the collection. For instance, the following example defines four tags (History, Economics, Science Fiction and Science) that might be used to categorize a book store.

$cloud = new Zend_Tag_Cloud(array(  'tags' => array(      array('title' => 'History', 'weight' => 16,            'params' => array('url' => '/tag/history')),      array('title' => 'Economics', 'weight' => 25,            'params' => array('url' => '/tag/economics')),      array('title' => 'Science Fiction', 'weight' => 12,            'params' => array('url' => '/tag/science-fiction')),      array('title' => 'Science', 'weight' => 7,            'params' => array('url' => '/tag/science')),  );));

You can then render the tag to the screen simply by echoing the $cloud variable. The results are presented in Figure 2.

Rendering the Book Store Cloud
Figure 2. Rendering the Book Store Cloud

Notice how the font sizes differ according to the weighting assigned to each tag. This is what makes it possible for users to easily determine what types of content are more prevalent on your site. But this automated feature is probably of secondary concern to you at the moment, because the example presented in Figure 2 doesn't actually look like a cloud at all! This is because the Zend Framework makes no assumptions in terms of what you'd like your cloud to ultimately look like when rendered to the browser. Instead, it provides a starting point from which you can tweak the cloud layout. Read on to learn how to do this.

Decorating Your Tag Cloud

Relying on frameworks to generate the code used for features such as HTML forms, tag clouds and paginated database results often means sacrificing some control over the look and feel. Not so with the Zend Framework, thanks to the diligent use of decorators throughout the components. Developers can use these decorators to customize how the component's generated code is rendered to the browser.

Specifically, you can use these decorators in conjunction with CSS to both stylize how the tag cloud is presented in its entirety, such as adding a background color to the cloud, and stylize each tag using a specific font. Here's the revised example:

$cloud = new Zend_Tag_Cloud(array(    'tags' => array(        array('title' => 'History', 'weight' => 16,              'params' => array('url' => '/tag/history')),        array('title' => 'Economics', 'weight' => 25,              'params' => array('url' => '/tag/economics')),        array('title' => 'Science Fiction', 'weight' => 12,              'params' => array('url' => '/tag/science-fiction')),        array('title' => 'Science', 'weight' => 7,              'params' => array('url' => '/tag/science')),    ),    'cloudDecorator' => array(      'decorator' => 'HtmlCloud',      'options' => array (        'htmlTags' => array (          'div' => array ('id' => 'tags')        ),        'separator' => ' '      )    ),    'tagDecorator' => array (      'decorator' => 'HtmlTag',      'options' => array (        'htmlTags' => array ('span')      )    )));

Combine this revised example with a simple bit of CSS to restrict the cloud width:

#tags {  width: 200px;}

If you render the revised cloud to the browser, you'll see we're moving much closer to the desired goal, as demonstrated in Figure 3.

Rendering the Book Store Cloud
Figure 3. Stylizing the Cloud with Decorators and CSS

Even this is still a bit bland for my tastes. What if we took it a step further, stylizing the tags according to their weight? Revise the tagDecorator so that it looks like this:

'tagDecorator' => array (  'decorator' => 'HtmlTag',  'options' => array (    'htmlTags' => array ('span'),    'classList' => array('tag1', 'tag2', 'tag3', 'tag4')  ))

Now add the following classes to your CSS document:

.tag1 {  font-size: 12px;  color: blue;}.tag2 {  font-size: 14px;  color: purple;}.tag3 {  font-size: 16px;  font-weight: bold;  color: orange;}.tag4 {  font-size: 20px;  font-weight: bold;  color: red;}

With the revised scripts in place, you should see the tag cloud presented in Figure 4.

Rendering the Book Store Cloud
Figure 4. Customizing Your Cloud Tags

Page 1 of 2

This article was originally published on July 16, 2010

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date