Home » HTML » HTML_TagCloud » Manual

Introduction

Introduction – Introduction to HTML_TagCloud.

Edited By

Overview

This package can be used to generate tag coulds in HTML and CSS. A tag cloud is an visual representation of list of so-called "tags" or keywords, that do have a different font size depending on how often they occur on the page/blog.

More information on tag clouds is available in Wikipedia.

This package does not only visualize frequency, but also timeline infomation. The newer the tag is, the deeper its color will be; older tags will have a lighter color.

Simple usage example

Basic example

<?php
require_once 'HTML/TagCloud.php';

$tags = new HTML_TagCloud();
// add Elements
$tags->addElement('PHP'       ,'http://www.php.net'  , 39, strtotime('-1 day'));
$tags->addElement('XML'       ,'http://www.xml.org'  , 21, strtotime('-2 week'));
$tags->addElement('Perl'      ,'http://www.xml.org'  , 15, strtotime('-1 month'));
$tags->addElement('PEAR'      ,'http://pear.php.net' , 32, time());
$tags->addElement('MySQL'     ,'http://www.mysql.com', 10, strtotime('-2 day'));
$tags->addElement('PostgreSQL','http://pgsql.com'    ,  6, strtotime('-3 week'));
// output HTML and CSS
print $tags->buildALL();
?>

The above example code creates a tag cloud containing five items. The tag used most often is "PHP"; it will appear in the largest font. The tag used latest is"PEAR", it is in the deepest color. Tags are sorted by alphabetically, and escaped in HTML.

Usage examples

Usage examples – Using HTML_TagCloud.

Edited By

Generate HTML and CSS separately

HTML_TagCloud creates HTML and CSS. The HTML is a simple list, decorated by CSS. You are able to output HTML and CSS separately.

output HTML and CSS separately

<?php
// CSS part only
$css = $tags->buildCSS();
// html part only
$taghtml = $tags->buildHTML();
?>

The HTML output depends on the tag data that have been added via addElement(), but the CSS output is static. You can use this package's CSS output statically.

Modify the decoration of the tag

It is possible to modify the colors used by the CSS. You need to define your own class which extends HTML_TagCloud and override color and size properties.

Decoration example

<?php
class MyTags extends HTML_TagCloud
{
    protected $epocLevel = array(
        array(
            'earliest' => array(
                'link'    => 'ffdfdf',
                'visited' => 'ffdfdf',
                'hover'   => 'ffdfdf',
                'active'  => 'ffdfdf',
            ),
        ),
        array(
            'earlier' => array(
                'link'    => 'ff7f7f',
                'visited' => 'ff7f7f',
                'hover'   => 'ff7f7f',
                'active'  => 'ff7f7f',
            ), 
        ),
        array(
            'previous' => array(
                'link'    => 'ff7f7f',
                'visited' => 'ff7f7f',
                'hover'   => 'ff7f7f',
                'active'  => 'ff7f7f',
            ), 
        ),
        array(
            'recent' => array(
                'link'    => 'ff4f4f',
                'visited' => 'ff4f4f',
                'hover'   => 'ff4f4f',
                'active'  => 'ff4f4f',
            ), 
        ),
        array(
            'later' => array(
                'link'    => 'ff1f1f',
                'visited' => 'ff1f1f',
                'hover'   => 'ff1f1f',
                'active'  => 'ff1f1f',
            ),
        ),
        array(
            'latest' => array(
                'link'    => 'ff0000',
                'visited' => 'ff0000',
                'hover'   => 'ff0000',
                'active'  => 'ff0000',
            ),
        ),
    );
    protected $size_suffix = 'pt';
    protected $fontsizerange = 0;
    protected $basefontsize = 12;
}
?>

Omit timeline feature

If you don't want to add timeline information and have the color changing accordingly, just omit the fourth parameter to addElement(). When doing this, the current time is set.

Omitting the timeline

<?php
$tags->addElement('PHP','http://www.php.net', 39);
?>