?

Log in

No account? Create an account

Previous Entry | Next Entry

HOWTO: Customize Sizes of Tag Cloud

  • Nov. 12th, 2007 at 9:29 AM
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] = """<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>""";
        }
    }

    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 """<div class="widget-footer"><a href="$tags_url" title="$*text_sidebar_tags">$*text_sidebar_tags</a></div>\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.

Comments

( 4 comments — Leave a comment )
miss_zipper
Nov. 26th, 2007 10:16 pm (UTC)
Hello, av8rmike!
Unfortunately, the sizes of tags did not change after bringing of code on a pages: http://www.livejournal.com/customize/advanced/layerbrowse.bml?id=9695187 http://www.livejournal.com/customize/advanced/layeredit.bml?id=9695187 what is my error in? Say, please:))
av8rmike
Nov. 27th, 2007 04:36 am (UTC)
You have to set "Display of tags in sidebar" to Cloud, not List, to be able to change the sizes with this code.
bunnykitteh
May. 3rd, 2008 03:32 am (UTC)
I did this, and it changed the size of the tag cloud text, but it switched my blog from 3 sidebars to 2 :( The tag cloud is 1st in the right sidebar with my theme (Hills Pink) but after following this tutorial, everything switched to the left sidebar, and the right was left blank.

Any help?
av8rmike
May. 5th, 2008 12:13 pm (UTC)
You'll need to add this line to the theme layer, near the rest of the layer info lines:
set layout_type = "3CM";
That should probably be in the tutorial somewhere too...
( 4 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars