Adding a Tag Cloud to Movable Type 3.2

Contents:
1 - Install Cloud Nine
2 - Creating menus
3 - Create stylesheet
4 - Include in templates
5 - Using Cloud Nine

Disclaimer. This method works for me but it may not work for you depending on your server or the settings of your Movable Type installation. You will need to know how to use Movable Type, its plug-ins, templating system, and a little CSS. Secondly, I am not a professional programmer, only a professional designer (who has to make far too many compromises for his clients - hence this slightly experimental site) so everything written here should be taken with a pinch of salt, so if it does not work - don't panic! Backstep and try again - which leads on to my last point: back up everything prior to beginning any modifications to your site regardless of complexity.

Here's my current coding and set-up. Since my blog only has a few categories, I have merged my category cloud in with my static links, as I did not want two menu systems. If and when my categories gets bigger, I may move the static links into their own area, but for the meantime, I think it looks quite neat.

 

Step 1, Download and install CloudNine 2.6.

Easily available from socklabs, follow the usual steps to install and remember to CHMOD CloudNine.pl to 755. I'll configure the plug-in at the end of the tutorial, since we need a system to be able to see any changes implemented.

[As a note, use CloudNine 2.6 with Movable Type 3.2 - CloudNine 3 is intended for MT3.3]

 

Step 2, Create a menu.

Since I like modulisation, I created a module in the Templates / Modules section simply called Menu. Then on all the Index / Archive templates simply call the module with the following:

<$MTInclude module="Menu"$>

That way, if you change your menu layout, for example adding extra Index templates, you only need to edit the one file and rebuild the blog.

Menu module:

<div class="module-categories module">
  <h2 class="module-header">Goto:</h2>
  <div class="module-content">
    <a href="<$MTBlogURL$>" title="Home">Home</a> &#8226;
    <a href="<$MTLink template='Links'$>" title="Links">Links</a> &#8226;
    <a href="<$MTLink template='Contact'$>" title="Contact">Contact</a> &#8226;
      <MTCatCloud>
        <a href="<$MTBlogURL$><$MTCatCloudStub$>/" class="<$MTCatCloudCSSID$>"><$MTCatCloudLabel$></a> <$MTCatCloudWeight$> &#8226;
      </MTCatCloud>
    <a href="<$MTLink template='Master Archive Index'$>" title="Sitemap">Sitemap</a>
  </div>
</div>

As you may notice, I have mixed in my semi-static pages, such as Contact, by calling the template name using MTLink. A neater and safer method than linking directly to a page URL - unless of course you want to link to a non-MT templated page. You can of course omit the static links and just have a tag cloud render.

What's the &#8226; ? That's just character code for a bullet point, since we are writing HTML, we might as well ensure everyone sees almost exactly what we see. The biggest mistake people make is not realising that not everyone has the same keyboard and character map as everyone else on the planet - in England it's the dreaded £ sign, which on a UK keyboard is Shift+3, but on a US keyboard it comes out as #.

 

Step 3, creating an auto-generating style-sheet.

CloudNine does some excellent work behind the scenes generating style information, once you have set up the configuration which I will cover in step 5. In your Blog's Template section, create a new Index Template called CloudNine Stylesheet, and name the output file as styles-cloudnine.css.

<MTCatCloud>
a.<$MTCatCloudCSSID$>, a.<$MTCatCloudCSSID$>:link, a.<$MTCatCloudCSSID$>:visited {
    <$MTCatCloudCSS$>
    line-height:normal;
}
</MTCatCloud>
<MTCatCloud>
a.<$MTCatCloudCSSID$>:active, a.<$MTCatCloudCSSID$>:hover {
    color: #0000ff;
    text-decoration: none;
}
</MTCatCloud>

What we are doing here is calling Cloud Nine's CSS loop twice, once to set the initial colour class (and any other link styling you like on your blog) and a second time for the roll-over effect - in this case a nice strong blue to counter the reds I use in my Cloud, but you can use any colour you like.

 

Step 4, calling the Menu module in the headers of your Index / Archive templates.

Second to last, we add our stylesheet and menu system to the any page that you want it on - so for starters open the Main Index template and add the following line of code in your header. Place it directly under the other call for your blog's stylesheet.

<link rel="stylesheet" href="<$MTBlogURL$>styles-cloudnine.css" type="text/css" />

Next, add the Menu include. On my design, I deleted the div with the class "module-categories module" which created the default MT category method and replaced it with the following:

<$MTInclude module="Menu"$>

Usually it's directly below div id=beta, but it will depend on if you have custom templates.

 

Step 5, Cloud Nine configuration.

Going into your blog's settings and onto the plug-in tab - you can then choose the CloudNine settings.

First up in the list is Minimum entry count - this setting is for the minimum number of entries required to allow that category a place in the cloud.

Next is font unit - depending on your CSS templating, you can use either pt or px (I haven't tried %, and am not sure if that would work in this case). It's a subtle difference between the two, and will be most notable across different browser makes.

Smallest and largest is basically the smallest unit size, as defined in font unit, up to the largest. I've gone for 7 to 18 - but experiment and see how this affects your blog layout - bigger is not always better.

Start - this simply named setting is what colour your links should be. I'm not 100% sure where the starting point is when the colours are worked out, so some experimentation is required to get a colour set that fits in with your blog colour scheme.

Scheme and Variation, are super tools that generate colours based on your start colour. Default mono, should create colours that are similar to your start colour in a brighter to darker fashion. Out of the other choices, Analogic should give you a nicer set of colours and some experimentation is needed with the variations until you find a setting that you are happy with. Future versions of the plug-in should have a colour setting which updates in the settings panel so saving some rebuilds to see what your colours are coming out like.

 

Once you are happy - rebuild and see how your blog now looks a bit more Web 2.0 (roll on 3.0!)

[REV: 2]