Create a tag cloud
Here is a little trick to create a tag cloud in Movable Type, like I did on my photoblog.
Step 1
First, you need the Compare plugin for MT. Install it following the instructions on its website.
Step 2
You will need to insert this in your stylesheet, to control the size of the tags.
.one {font-size:75%;} /* for 1 or 2 uses */
.two {font-size:100%;} /* for 3 to 10 uses */
.three {font-size:125%;} /* 11 to 20 uses */
.four {font-size:150%;} /* 21 to 30 uses */
.five {font-size:175%;} /* 31 to 40 uses */
.six {font-size:200%;} /* 41 to 50 uses */
.seven {font-size:225%;} /* 51 to 60 uses */
.eight {font-size:250%;} /* 61 to 70 uses */
.nine {font-size:275%;} /* 71 to 80 uses */
.ten {font-size:300%;} /* 81 to 100 uses */
.bang {font-size:325%;} /* more than 100 uses */
Of course, you can change the sizes as you like.
Step 3
Create a new index template with the following settings:
Template name: Tags
Output file: tags.php
You have to put your layout codes in this page, using the usual methods. (PHP inclusion, or whatever) Then, instead of the contents, paste these codes:
<p>
<MTTags>
<a href="<$MTTagSearchLink$>" class="<MTIfBetween a="[MTTagCount]" lower="1" upper="2" numeric="1">one</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="3" upper="10" numeric="1">two</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="11" upper="20" numeric="1">three</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="21" upper="30" numeric="1">four</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="31" upper="40" numeric="1">five</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="41" upper="50" numeric="1">six</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="51" upper="60" numeric="1">seven</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="61" upper="70" numeric="1">eight</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="71" upper="80" numeric="1">nine</MTIfBetween><MTIfBetween a="[MTTagCount]" lower="81" upper="100" numeric="1">ten</MTIfBetween><MTIfGreater a="[MTTagCount]" b="100" numeric="1">bang</MTIfGreater>"><$MTTagName></a>
</MTTags>
</p>
What's this mess? Here is a little explanation. The usual codes to display tags is this:
<p>
<MTTags>
<a href="<$MTTagSearchLink$>"><$MTTagName></a>
</MTTags>
</p>
This would output a plain list of tags used on your site. But to control tag sizes, we add a class to tag links and the class changes with the number of times the tag have been used. For example, if a tag was used only one or two times, this would be the output:
<a href="taglink" class="one">tagname</a>
If it was used between 51 or 60 times (I bolded this part in the tag cloud codes), it would output:
<a href="taglink" class="seven">tagname</a>
And the font-size would be 225%! You can change the values as you want :)
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)