Yii Tag Cloud Widget


Do you know how to create widget? If yes continue this post, otherwise Please read this "Create Widget In Yii"
This tutorial will help you to create and understand the cloud tag widget concept. I tried lot of formula to apply font size for tag. finally i used this
"$size = ($term['counter'] /$maximum ) * (TAG_MAX_FONT_EM - TAG_MIN_FONT_EM) + TAG_MIN_FONT_EM;"
In demo file, I used array to create cloud tag.
I used sqlite database in the attachment file. So you can create new tag name and assign the tag counter in downloaded file.

CloudWidget Class

I created the "CloudWidget.php" inside protected/component folder. I get the top 20 tag details with counter from "CloudWidget" class. Then i pass this tag details to view.

class CloudWidget extends CWidget
    public function init(){}
    public function run(){
        $model=Tagcloud::model()->findAll(array("order"=>"counter desc","limit"=>"20"));

CloudWidget View

This Widget view "tagcloud.php" will be inside "protected/component/views" folder. It will receive the tag details from "CloudWidget" class and display the cloud tag with help of css.

<style type="text/css">
#tagcloud {
    display: inline-block;
    padding: 10px;
    border: 1px solid #559DFF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
#tagcloud a:link, #tagcloud a:visited {
    color: #333;
#tagcloud a:hover {
    text-decoration: underline;
#tagcloud span {
    padding: 4px;
#tagcloud .smallest {
    font-size: x-small;
#tagcloud .small {
    font-size: small;
#tagcloud .medium {
#tagcloud .large {
#tagcloud .largest {
define('TAG_MIN_FONT_EM', 1); 
define('TAG_MAX_FONT_EM', 4);
foreach($model as $row)
    $term = $row->term;
    $counter = $row->counter; 
    // update $maximum if this term is more popular than the previous terms
    if ($counter > $maximum) $maximum = $counter;
    if ($counter < $minimum) $minimum = $counter; 
    $terms[] = array('term' => $term, 'counter' => $counter); 
// shuffle terms unless you want to retain the order of highest to lowest
<div class="categories">
    <div id="tagcloud">
        foreach ($terms as $term)
            $size = ($term['counter'] /$maximum ) * (TAG_MAX_FONT_EM - TAG_MIN_FONT_EM) + TAG_MIN_FONT_EM;
        <a href="<?php echo Yii::app()->createAbsoluteUrl(
                style="font-size:<?php echo $size."em"; ?>;">
        <?php echo $term['term']; ?></a>
    <?php }; ?>