[Paid accounts] Inserting a tag cloud in the sidebar or on the tag page

[s2flexisquared]

The code in this tutorial will create tag clouds, which can be inserted into a box in the sidebar, or into the tag page. A tag cloud is an alphabetised list of tags where the most commonly used tags are depicted in a larger font or otherwise emphasized.

To do that, the tags have to be divided into different categories according to their number of uses: tags used few times, tags used several times, tags used many times. You can of course have as many categories as you want.

Inserting a tag cloud in the sidebar




1. Make sure you have created a theme layer.

2. Do you already have the print_sidebar function in your layer? If yes, you'll need to merge it with the new code. If you have difficulties doing that, make your layer viewable, and comment here, without forgetting to post your error message.

3. If not, copy paste the following code in your layer:

Colour coding:

• Comments
• Code that can be customised

function print_sidebar() { #### TAG CLOUD CODE #### ###### Configuration ###### var int tag_category = 4; # The number can be changed if you want more or fewer categories. var int basefontsize = 80; # size of the first tag category in percent of the default font size of the page var int increment = 20; # The difference in size between tag categories. var string tag_title = "Tag cloud"; # Title of the tag box. ###### End Configuration ###### var Page p = get_page(); var string list = ""; var int max_use_count = 0 ; var int min_use_count ; var int x ; if (size $p->visible_tag_list() > 0) { # Define a maximum and minimum number of uses of the tags: var TagDetail[] visible_tag_list = $p->visible_tag_list(); if($visible_tag_list) { $min_use_count = $visible_tag_list[0].use_count; foreach var TagDetail td ($p->visible_tag_list()) { if ($td.use_count > $max_use_count) { $max_use_count = $td.use_count; } elseif ($td.use_count < $min_use_count) { $min_use_count = $td.use_count; } } } # Avoid a division by zero if ($max_use_count == $min_use_count) { $max_use_count = $max_use_count + 1; } # Put the tags into categories according to the number of times they're used, # then use it to determine the size of the tag: foreach var TagDetail td ($p->visible_tag_list()) { # Create different categories according to the number of uses of the tag $x = (($td.use_count - $min_use_count) * $tag_category / ($max_use_count - $min_use_count)); if ($x == $tag_category) { $x = $tag_category - 1; } # Convert those categories into sizes $x = ($x * $increment) + $basefontsize; $list = $list + """ $td.name """; } # Enclose the entire list in an li tag as required by the layout. $list = """

""" + $list + """

"""; # Add styling to box title. $tag_title = """

$tag_title

"""; } #### END TAG CLOUD CODE #### ###### Specify Box Order ###### # Print out all your sidebar boxes in the order you want, including a call for # this one -- print_sidebar_box($tag_title, $list) -- nested within an if # statement to prevent tags box from printing in the event of no visible tags. print_userpic(); print_sidebar_blurb(); if ($list != ""){print_sidebar_box($tag_title, $list);} print_sidebar_linklist(); print_sidebar_calendar(); ###### End Box Order ###### }
4. You can customise the number of tag categories:
var int tag_category = 4
The more categories you use, the bigger the most often used tag will be, so use with caution.

You can also customise the size used:
var int basefontsize = 80; var int increment = 30;
basefontsize is the font size of the least used tags, in percent of the default font size of the page. For example, if your page font size is set at 12px, and you choose basefontsize = 80, the font size of the first category of tags will be 80% of 12px.

I advise you against using numbers lower than 70 or 80. Not only are tags not legible, but some browsers allow their users to set a minimum font size, and they might not see the differences in the smallest categories.

increment determines the differences in font size between the tag categories. In our example above, if you choose increment = 30, the second category of tags will be 110% of 12px, i.e. 80 + 30.

5. Do you already have the Page::print_custom_head function in your theme layer? If not, add the following code to your layer:

function Page::print_custom_head() { """ """; }
6. Now add this css to your theme layer's Page::print_custom_head function, just before the line:

/* Take off the left margin of the tag list */ .tagBox { margin-left: 0; padding-left: 0; }
7. Compile your layer.

Inserting a tag cloud on the tag page




1. This code will insert a tag cloud in a pseudo-entry on your tag page. You can find the tag page here:

http://yourusername.livejournal.com/tag/

2. Make sure you have created a theme layer.

3. Do you already have the TagsPage::print_body function in your layer? If yes, you'll need to merge it with the new code. If you have difficulties doing that, make your layer viewable, and comment here, without forgetting to post your error message.

4. If not, copy paste the following code in your layer:

Colour coding:

• Comments
• Code that can be customised

function TagsPage::print_body { #### TAG CLOUD CODE #### ###### Configuration ###### var int tag_category = 8; # The number can be changed if you want more or fewer categories. var int basefontsize = 80; # size of the first tag category in percent of the default font size of the page. var int increment = 50; # The difference in size between tag categories. var string subject = "Tag cloud"; # Title of the tag page. ###### End Configuration ###### var Page p = get_page(); var string list = ""; var int max_use_count = 0 ; var int min_use_count ; var int x ; if (size $p->visible_tag_list() > 0) { # Define a maximum and minimum number of uses of the tags: var TagDetail[] visible_tag_list = $p->visible_tag_list(); if($visible_tag_list) { $min_use_count = $visible_tag_list[0].use_count; foreach var TagDetail td ($p->visible_tag_list()) { if ($td.use_count > $max_use_count) { $max_use_count = $td.use_count; } elseif ($td.use_count < $min_use_count) { $min_use_count = $td.use_count; } } } # Avoid a division by zero if ($max_use_count == $min_use_count) { $max_use_count = $max_use_count + 1; } # Put the tags into categories according to the number of times they're used, # then use it to determine the size of the tag: foreach var TagDetail td ($p->visible_tag_list()) { # Create different categories according to the number of uses of the tag $x = (($td.use_count - $min_use_count) * $tag_category / ($max_use_count - $min_use_count)); if ($x == $tag_category) { $x = $tag_category - 1; } # Convert those categories into sizes $x = ($x * $increment) + $basefontsize; $list = $list + """ $td.name """; } # Enclose the entire list in a paragraph tag. $list = """
""" + $list + """
"""; } #### END TAG CLOUD CODE #### #### Print the tag cloud in an entry-like post #### print """

$subject

$list

"""; }
5. You can customise the number of tag categories:
var int tag_category = 4
The more categories you use, the bigger the most often used tag will be, so use with caution.

You can also customise the size used:
var int basefontsize = 80; var int increment = 30;
basefontsize is the font size of the least used tags, in percent of the default font size of the page. For example, if your page font size is set at 12px, and you choose basefontsize = 80, the font size of the first category of tags will be 80% of 12px.

I advise you against using numbers lower than 70 or 80. Not only are tags not legible, but some browsers allow their users to set a minimum font size, and they might not see the differences in the smallest categories.

increment determines the differences in font size between the tag categories. In our example above, if you choose increment = 30, the second category of tags will be 110% of 12px, i.e. 80 + 30.

6. Compile your layer.

Edit 5 June '06: The code was updated to avoid an error when there is only one tag, or when all the tags have the same number of uses.