0 follower

Creating Tag Cloud Portlet

Tag cloud displays a list of post tags with visual decorations hinting the popularity of each individual tag.

1. Creating TagCloud Class

We create the TagCloud class in the file /wwwroot/blog/protected/components/TagCloud.php. The file has the following content:

class TagCloud extends CPortlet
    public $title='Tags';
    public $maxTags=20;
    protected function renderContent()
        foreach($tags as $tag=>$weight)
            $link=CHtml::link(CHtml::encode($tag), array('post/index','tag'=>$tag));
            echo CHtml::tag('span', array(
            ), $link)."\n";

Unlike the UserMenu portlet, the TagCloud portlet does not use a view. Instead, its presentation is done in the renderContent() method. This is because the presentation does not contain much HTML tags.

We display each tag as a hyperlink to the post index page with the corresponding tag parameter. The font size of each tag link is adjusted according to their relative weight among other tags. If a tag has higher frequency value than the other, it will have a bigger font size.

2. Using TagCloud Portlet

Usage of the TagCloud portlet is very simple. We modify the layout file /wwwroot/blog/protected/views/layouts/column2.php as follows,

<div id="sidebar">
    <?php if(!Yii::app()->user->isGuest) $this->widget('UserMenu'); ?>
    <?php $this->widget('TagCloud', array(
    )); ?>

Found a typo or you think this page needs improvement?
Edit it on github !