Mister Baltimore (av8rmike) wrote in s2expressive,
Mister Baltimore

HOWTO: Customize Sizes of Tag Cloud

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;

    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] = """<a href="$td.url" style="font-size: ${tagtextsize}px;" title="$uses, $security">$td.name</a>""";
        } elseif ($*tag_display == "list") {
            $links[size $links] = """<a href="$td.url" title="$uses, $security">$td.name</a>""";

    var string tags_url = $p.journal->base_url() + "/tag/"; # TODO: Need Page.view_url{"tags"} which doesn't exist yet.
    print safe """<div class="widget-footer"><a href="$tags_url" title="$*text_sidebar_tags">$*text_sidebar_tags</a></div>\n""";
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.
Tags: $acct level:paid or perm, how to:instructions, s2:theme layer, sidebar:tags
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened