Sunday, January 28, 2007

Up- or Down- A Grade is a Slope

It was upgrade weekend for the blog, meaning I had my eyes turned under the hood and my fingers in the blog code Friday into Saturday (today, all reading, responding, and figuring grades).

I was running MT3.2, growing every day more envious of those who were putting to use the tagging features built into 3.3+. The upgrade was a cinch. Just FTPed the files into place and logged in. The config file didn't need any changes. Well, it didn't require any changes, that is, until I also converted the database from MySQL4 to MySQL5. For that, I had to add a DBSocket line to the config file. I had not a clue about it at the time, but the support folks at icdsoft.com are remarkably good.

That's a hearty new cumulus tagcloud over at the left. There's a lot to be said for MT's tagging features built into the latest versions. Now I can merge tags across the entire weblog, sort by tags (for editing or adding new companion tags), and grade the tags with a max="x" setting. That's the statement I use to come up with ten levels for the tag cloud. And I've set the CSS to display:none for the bottom five (#6-10). That way only the top five levels show up, and the cloud isn't the size of Lake Michigan.

I also had to downgrade the search template that came along with MT3.4 (maybe 3.3, too). By default, the new search template for MT works with the wonky style sheets that came with 3.2+. I'm still using a frame-sy template from all the way back to 2.65, but I like it. Rather than upgrade the style sheet, I retro-graded the template. Matters very little in the end, I suppose. But I really like the way the new MT processes the tag families (The Confluent's), listing entries for a particular tag and also listing the other tags attached to each respective entry.

For anyone pilfering the internets for pieces of stray code, here's how I've done my tagcloud (in Movable Type 3.4)

Create a module named "cloud." Copy what's here into it. Depending on your main style sheet, your sidetitle div might be different.:

<div class="sidetitle">Tagcloud</div>
<div id="cloud">
<MTTags>
<a href="<$MTTagSearchLink$>" class="tag<$MTTagRank max="10"$>"><$MTTagName$></a>
</MTTags>
</div>

<!--Optional tag count in parentheses-->
<!-- (<$MTTagCount$>)-->

Into the main template:

<$MTInclude module="cloud"$>

And into the main style sheet:
I should note that this is still very much a work-in-progress. It should give you a general sense of what I've done.

/*#########Tag Cloud########*/

#cloud
{font-family: verdana, arial, sans-serif;
padding-top: 1px;
line-height:80%;
text-align:center;
padding-bottom:8px;
border-bottom: 4px solid #E7E6E6;
}

#cloud a {text-decoration:none;
padding:0px;}

#cloud A { text-decoration: none; }
#cloud A:link { text-decoration: none; }
#cloud A:visited { text-decoration: none; }
#cloud A:active { color: #FFCC66; }
#cloud A:hover { color: #FFCC66; }

a.tag10{
font-size:6px;
display:none;
color: #E7E8EB;
font-weight:700;
}

/*display:none designates which of the levels of tags (corresponding to the max="10" statement in the module) will actually show up in the cloud.*/

a.tag9{
font-size:7px;
display:none;
color: #E7E8EB;
font-weight:900;
}

a.tag8{
font-size:8px;
display:none;
color: #E7E8EB;
font-weight:700;
}

a.tag7{
font-size:9px;
display:none;
color: #E7E8EB;
font-weight:900;
}

a.tag6{
font-size:9px;
display:none;
color: #E7E8EB;
font-weight:700;
}
a.tag5 {
font-size:10px;
color: #C0C5D3;
font-weight:500;
}

a.tag4 {
font-size:11px;
color: #C0C5D3;
font-weight:700;
}

a.tag3 {
font-size:13px;
color: #647094;
font-weight:900;
}

a.tag2 {
font-size:15px;
color: #081B55;
font-weight:600;
}

a.tag1 {
font-size:17px;
color: #081B55;
font-weight:700;
}
/*The font-weights here still need fine-tuning.*/

That's it. To settle on a range of hex codes, I used color blender. With the new version of Movable Type, all of what's shown here is supported without any plugins. I mention this because I spent a frustrated half-hour messing around with Cloudnine before I realized it was obsolete and another frustrated half-hour wondering why the tags weren't showing up before I realized I had some other ineffective old tagging plugin still hanging around in my installation.

Bookmark and Share Posted by at January 28, 2007 11:00 PM to On Weblogs
Comments

Great post! Why don't software manuals have examples like this. I was able to take your code, tweak it and use it on my site. I haven't found anything else on the web as useful as this for a tag cloud.

thanks,
-nick

Posted by: Nick at February 3, 2007 12:57 AM