February 3, 2007

Building Category Cloud for MovableType

Here is a nice trick how to build category cloud for your MovableType blog. No plugins required, just past this snippet into your template.

<div class="side" id="CategoryCloud" style="line-height:1.6em;">
<MTCategories show_empty="0">
<a href="<$MTCategoryArchiveLink$>"
class="<$MTCategoryCount$>"><$MTCategoryLabel$></a>
</MTCategories>
<script type="text/javascript">
e = document.getElementById("CategoryCloud").getElementsByTagName("A");
for(i=0; i < e.length; i++)
{
if(e[i].className != "")
{
t = e[i].className;
if(t > 256) e[i].style.fontSize = "230%";
else if(t > 126) e[i].style.fontSize = "200%";
else if(t > 68) e[i].style.fontSize = "180%";
else if(t > 16) e[i].style.fontSize = "160%";
else if(t > 8) e[i].style.fontSize = "130%";
else if(t >= 2) e[i].style.fontSize = "110%";
else if(t = 1) { e[i].style.fontSize = "100%"; }
}
}

</div>

[Found here]

 The idea is simple - generate list of categories with count of posts embedded into class attribute and then in browser scan categories and set font size according to any kind of cloud algorithm.

...