Add a tag cloud to the CGBlog module
Posted: Wed Apr 28, 2010 3:03 pm
We have a client using the CGBlog module who wanted to have their various categories display as a tag cloud on their blog.
After a bit of thought we realised we could use 'browse by category' action of the module together with some smarty trickery to do it pretty neatly. Like this:
Create a new 'Browse Category Template' or change your default one to:
Add some suitable styles to your stylesheet. Something like this as a start:
and then just use the {CGBlog action="browsecat"} wherever you want your tagcloud. If you've created a new template that's not the default then obviously pass the name of your template like {CGBlog action="browsecat" browsecattemplate="tagcloud"}.
you should end up with something that looks like this:
http://www.runnymedetrust.org/projects-and-publications/appg/parliamentary-blog.html
s.
After a bit of thought we realised we could use 'browse by category' action of the module together with some smarty trickery to do it pretty neatly. Like this:
Create a new 'Browse Category Template' or change your default one to:
Code: Select all
{assign var=maxcount value=0}
{foreach from=$categories item='one'}
{if $one.count gt $maxcount}{assign var=maxcount value=$one.count}{/if}
{/foreach}
{foreach from=$categories item='one'}
<a href="{$one.url}" title="{$one.name}"
class="cloud_{math|round equation="(currentCount / maxCount * 10)" currentCount=$one.count maxCount=$maxcount}">{$one.name'}</a>
{/foreach}
Code: Select all
a.cloud_1 { font-size: 0.7em; line-height: 110%;}
a.cloud_2 { font-size: 0.8em; line-height: 110%;}
a.cloud_3 { font-size: 0.9em; line-height: 110%}
a.cloud_4 { font-size: 1.0em; line-height: 110%;}
a.cloud_5 { font-size: 1.1em; line-height: 110%;}
a.cloud_6 { font-size: 1.2em; line-height: 110%;}
a.cloud_7 { font-size: 1.3em; line-height: 110%;}
a.cloud_8 { font-size: 1.4em; line-height: 110%;}
a.cloud_9 { font-size: 1.5em; line-height: 110%;}
a.cloud_10 { font-size: 1.6em; line-height: 110%;}
you should end up with something that looks like this:
http://www.runnymedetrust.org/projects-and-publications/appg/parliamentary-blog.html
s.