HOWTO: Customize Sizes of Tag Cloud

[av8rmike]

I can't believe I haven't done a tutorial like this sooner. People ask about changing the sizes of tags in the sidebar tag cloud all the time in Support, so I decided to go ahead and just whip up something simple.

Unfortunately, the tag sizes can't be customized individually through CSS, so this tutorial requires creating a theme layer, and therefore, a Paid or Permanent account. There are directions in this post about creating a theme layer for Expressive layouts, updated for the new customization pages. After entering in the layerinfo lines and setting the base theme and designer, copy in this code:

function print_module_tags(string title) {
var Page p = get_page();
var TagDetail[] total_tags = $p->visible_tag_list();
var int most_count = 1;
if (size($total_tags) < 1) { return; }
var TagDetail[] tags;
var int tcount = 0;
foreach var TagDetail td ($total_tags) {
if (($*opt_tag_limit and $tcount < $*tag_limit) or not $*opt_tag_limit) {
$tags[$tcount] = $td;
$tcount++;
}
}

open_module("categories", $title, "");

var string[] links = [];
# First get the highest tag count there is
foreach var TagDetail td ($tags) {
if ($td.use_count > $most_count) {
$most_count = $td.use_count;
}
}

# Now print the tag cloud
foreach var TagDetail td ($tags) {
var string uses = get_plural_phrase($td.use_count, "text_tag_uses");
var string security = $td.visibility;
var int tagtextsize;
var int mintagsize = 7; # Minimum tag text size, in pixels
var int maxtagsize = 23; # Maximum tag text size, in pixels

$tagtextsize = ($td.use_count * ($maxtagsize - $mintagsize)) / $most_count + $mintagsize; # Text size, in pixels, of this tag

if ($*tag_display == "cloud") {
$links[size $links] = """ $td.name""";
} elseif ($*tag_display == "list") {
$links[size $links] = """ $td.name""";
}
}

print_module_list($links,"tagcloud");
var string tags_url = $p.journal->base_url() + "/tag/"; # TODO: Need Page.view_url{"tags"} which doesn't exist yet.
print safe """
$*text_sidebar_tags\n""";
close_module();
}The highlighted numbers are showing the default sizes, so change them to suit your wishes. Note that the sizes are in pixels, which is not the same thing as points. (For the obsessively curious, there are about 96 pixels in 1 inch, whereas 1 inch = 72 point.) Very large font sizes will cause single word tags to be cut off, as the sidebar is fixed with and overflow: hidden is set.

Hit "Save and Compile" when done, then make the theme layer the active one (steps 7 & 8 in the linked tutorial) and you should see your new tag sizes when you refresh the journal view.