?

Log in

No account? Create an account
 
 
Flex
[Paid accounts] Inserting a tag cloud in the sidebar or on the tag page
May 25th, 2006 @ 06:34 pm

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

Preview of the 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 + """<a href="$td.url" title="$td.use_count" style="font-size: $x%">$td.name</a> """;
	}

	# Enclose the entire list in an li tag as required by the layout.
	$list = """<li class="tagBox">""" + $list + """</li>""";

	# Add styling to box title.
	$tag_title = """<li class="sbartitle">$tag_title</li>""";
}
####   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() {
"""
<style type="text/css">

</style>
""";
}

6. Now add this css to your theme layer's Page::print_custom_head function, just before the </style> 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

Preview of the 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 + """<a href="$td.url" title="$td.use_count" style="font-size: $x%">$td.name</a> """;
	}

	# Enclose the entire list in a paragraph tag.
	$list = """<p style="margin: 2em;">""" + $list + """</p>""";

}

####   END TAG CLOUD CODE   ####


#### Print the tag cloud in an entry-like post ####

			             
	print """
	<div class="subcontent">
		<div class="datesubject">
				<div class="subject">
					$subject	
				</div>
			</div>
		<div class="entry">
			<div class="entry2">
			<div class="entry_text">
			$list			
                        </div>
                    </div>
		</div>
		<div class="separator"> &nbsp; </div>
		<div class="clear"> &nbsp; </div>
	</div>
	""";

}

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.

 
Page 1 of 2
<<[1] [2] >>
( Post a new comment )
 
kunzitekunzite1 on May 25th, 2006 07:48 pm (UTC)

sidebar #1 should prolly read "theme layer" instead of "layer theme."

and because i'm picky, i'd make the tagcloud on TagsPage look more like an entry. the hacks i made up for haven or opal should be a good start with getting an idea of how i'd do it which, imo, looks neater since it's all entry-like and stuff. :)
 
Snakelingsnakeling on May 25th, 2006 07:56 pm (UTC)
1. I can't believe none of us caught that :P

2. Oooh, shiny! I'll have a look at it this weekend, thanks :)
 
(no subject) - kunzite1 on May 25th, 2006 08:10 pm (UTC)
 
(no subject) - snakeling on May 25th, 2006 09:01 pm (UTC)
 
(no subject) - belenen on December 24th, 2006 04:39 pm (UTC)
 
(no subject) - kunzite1 on December 24th, 2006 08:24 pm (UTC)
 
(no subject) - belenen on December 25th, 2006 12:58 am (UTC)
 
(no subject) - kunzite1 on December 25th, 2006 04:25 am (UTC)
 
(no subject) - belenen on January 8th, 2007 01:07 pm (UTC)
 
(no subject) - s2flexisquared on January 9th, 2007 09:51 am (UTC)
 
 
(no subject) - (Anonymous) on May 25th, 2006 09:31 pm (UTC)
 
shiny happy glowyafuna on May 25th, 2006 11:48 pm (UTC)
Eep. The tutorial was actually drafted up several days before, and we spent a few days tweaking it (well snakeling and murklinstest tweaked it *grin* I just sat back and watched them.)

If you're interested in seeing tutorials before they come out, you could try monitoring s2flexitalk, our drafts/discussion community. Feel free to jump in to any active discussions, although I don't think there are any active right now. In any case, feel free to start your own! ;)

If you've got any cool new tutorials that you want to post to s2flexisquares, but you want someone to look over them first, you can also post them to s2flexitalk and just wait a bit. No guarantees that we'll catch everything, but someone will usually catch a bit of something (that sounds vaguely nasty).

*pimps*
 
 
[heatherface]xheather on June 2nd, 2006 08:18 am (UTC)
when I do this, along with the tutorial that moves my tags below my metadata, it totally kills my layout in IE. Any clue as to why this happens? Thanks in advance...
 
shiny happy glowyafuna on June 2nd, 2006 07:19 pm (UTC)
The division by zero? It happens in all browsers, since it has to do with S2 :)

Please make your theme layer viewable, and give us the link.
 
(no subject) - snakeling on June 2nd, 2006 07:58 pm (UTC)
 
(no subject) - afuna on June 3rd, 2006 11:49 am (UTC)
 
(no subject) - snakeling on June 4th, 2006 10:30 pm (UTC)
 
 
Heidipurecreation on June 3rd, 2006 04:34 am (UTC)
Sorry if this is the wrong topic, but I it was the closest I could find. Would anyone happen to know if there'd be a way to add a NORMAL list of tags to the sidebar for a community? It looks like you guys have done it here for this one. I already tried adding another extra box with theme layers, but apparently that doesn't work for communities (even if you have a paid account.) My customized community is here spybox. The CSS stylesheet I'm using is HERE... Any help would be great!
 
Snakelingsnakeling on June 3rd, 2006 05:36 am (UTC)
The comm needs to be paid :)

The simple tag list tutorial is here.
 
(no subject) - purecreation on June 3rd, 2006 06:52 am (UTC)
 
(no subject) - snakeling on June 3rd, 2006 01:02 pm (UTC)
 
(no subject) - purecreation on June 3rd, 2006 05:30 pm (UTC)
 
 
Mike: Computer Problems | Plastic Piece of Cra427 on June 13th, 2006 11:22 pm (UTC)
Ok - I've stuck it in, it's working. (other than some text formating I need to alter to the way I want it to look). My issue:

Drop tags that have less than x number of uses.

This should create a bubbling of the more common tags, and provide more of a difference in size.

Any help? :D thanks
 
Snakelingsnakeling on June 14th, 2006 10:11 am (UTC)
provide more of a difference in size.
The difference in size is something that you control anyway. Augment the increment and/or the number of categories :)

Here's the new tag cloud code (in green is what I changed):
####   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.
var int no_print_tag = 3 ; # Minimum number of uses of the tag for it to print.

###### 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 number of uses of the tags:
	var TagDetail[] visible_tag_list = $p->visible_tag_list();
	if($visible_tag_list) 
	{
    		foreach var TagDetail td ($p->visible_tag_list())
    		{
    			if ($td.use_count > $max_use_count)
    			{
    				$max_use_count = $td.use_count;
    			}
		}
	}

	# Define the mimimum number of uses of the tags:
	$min_use_count = $no_print_tag;

	# 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())
	{
		if ($td.use_count < $no_print_tag)
		{
			# Don't print anything
		}
		elseif ($td.use_count >= $no_print_tag)
		{
			# 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 + """<a href="$td.url" title="$td.use_count" style="font-size: $x%">$td.name</a> """;
		}
	}

	# Enclose the entire list in a paragraph tag.
	$list = """<p style="margin: 2em;">""" + $list + """</p>""";

}

####   END TAG CLOUD CODE   ####
If you need more help, tell me :)
 
(no subject) - 427 on June 14th, 2006 02:39 pm (UTC)
 
(no subject) - snakeling on June 14th, 2006 09:34 pm (UTC)
 
 
Mayhem: Advent Children :: Reeeenooopenguinsane on June 25th, 2006 06:05 am (UTC)
I can't get this at all. :/ I've only just begun trying to manipulate Flexible Squares, so pardon my ... er, slowness.

Might anyone be able to help me? I'm trying to get the tag cloud in my sidebar, right before my little calendar.

Also, is it possible at all to perhaps make the /tags page in columns?

http://www.livejournal.com/customize/advanced/layerbrowse.bml?id=6669070
 
Snakelingsnakeling on June 25th, 2006 06:18 pm (UTC)
In your theme layer, just above the lines beginning by print_sidebar_box, you need to paste the tag cloud code, ie everything between TAG CLOUD CODE and END TAG CLOUD CODE. Then paste this line just above the print_sidebar_calendar line:
	if ($list != ""){print_sidebar_box($tag_title, $list);}
Save and compile. Then follow the instructions in step 4, 5, 6 and 7.

Also, is it possible at all to perhaps make the /tags page in columns?
Not sure what you mean. Can you expand, or maybe make a mock-up?
 
(no subject) - penguinsane on June 25th, 2006 07:19 pm (UTC)
 
(no subject) - afuna on July 9th, 2006 02:10 pm (UTC)
 
 
Jackiejackie on June 29th, 2006 02:40 am (UTC)
question: is there any way to have both the tag cloud and my blurb in the sidebar? it'd be nice if i could have both. i'm not terribly familiar with html, but i got the tag cloud to work, so there is hope for me! :D

thank you so much! :)

Jackie
 
Jackiejackie on June 29th, 2006 02:45 am (UTC)
nevermind! got it! :D
 
 
Alexandra: Scheveningen Skyalexandramuses on July 4th, 2006 11:06 am (UTC)
Love the tag clouds! I was up half of last night looking for this, and lo and behold...

My question is thus: how do I remove the sidebar on the /tag page? It looks a little overkill to have both the main page tag cloud *and* the sidebar tag cloud.

http://lowlands-girl.livejournal.com/tag/

Thanks a million!
 
Snakelingsnakeling on July 4th, 2006 11:37 am (UTC)
Add this to your theme layer:
function TagsPage::print () {
	var Page page = get_page();	
	var string title = $this->title();
    	
	"""
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
                """;
		$this->print_head();
                """<title>$title</title>""";
	    if ($*external_stylesheet and $*external_stylesheet_url !="") 
	    	{
	        println safe """<link rel="stylesheet" type="text/css"  media='screen' href="$*external_stylesheet_url" />""";
	    	}
	    elseif ($*external_stylesheet)
	    	{
		    	println safe """<link rel='stylesheet' type='text/css' media='screen' href='$.stylesheet_url' />""";
	    	}
	     else 
	     	{
	        print """<style type="text/css">"""; 
                start_css();
                print_stylesheet();
                end_css(); 
                print "</style>";
	    	}
	    		 	
		$this->print_custom_head();
		"""
		</head>
		<body>
                <a name="top"></a>
        """;

        """
        <div class="headerimage"></div>""";
           if (viewer_sees_hbox_top()) {
               """<div id="leaderboardad" style="text-align: center; width: 728px; margin-bottom: 10px;">""";
               $this->print_hbox_top();
               "</div>";
           }
			"""
			<div id="content">
				""";
				$this->lay_print_header();			
			
				
			  	"""
  				<div id="maincontent">""";
					$this->print_body();	
					"
				</div>";
				$this->lay_print_footer();
           "</div>";
           if (viewer_sees_hbox_bottom() and ($.view == "recent" or $.view == "friends")) {
               """<div id="linkunitad" style="text-align: center; width: 750px; margin-top: 10px;">""";
               $this->print_hbox_bottom();
               "</div>";
           }
        if (viewer_sees_vbox()) { 
            "</td>";
            """<td valign="top" align="right" width="20%">""";
            """<div id="skyscraperad" style="margin-right: 10px; width: 160px;">""";
            $this->print_vbox();
            "</div></td></tr></table>";
        }
		"</body>
	</html>";
}

function TagsPage::print_custom_head ()
{
"""
<style type="text/css">
#maincontent {
	margin-right: 0;
	}
</style>
""";
}
Be careful, these functions are only for the Tag page. Don't go adding css in TagsPage::print_custom_head and expecting for it to work on all pages :)
 
(no subject) - alexandramuses on July 4th, 2006 12:10 pm (UTC)
 
 
Hi-chan (火ちゃん)hinoai on July 5th, 2006 12:11 pm (UTC)
This is really awesome, thank you for this code!! =^__^= I need to use my tags more often so there's more of a difference, lol.

I have a question.... How can I add " - " between each tag? They all kind of just run together right now, so it'd be nice to be able to see where one tag ends and the other begins, lol.
 
 
(no subject) - (Anonymous) on September 3rd, 2006 10:02 am (UTC)
 
Snakelingsnakeling on September 3rd, 2006 10:36 pm (UTC)
Re: Question :D
Set increment to 0, and all the tags will be the same size.

In your theme layer, in function print_sidebar(), just before the list at the end that goes print..., paste the part that's between TAG CLOUD CODE and END TAG CLOUD CODE. Once that's done, in the print list, wherever you want the tag cloud added, insert this line:
if ($list != ""){print_sidebar_box($tag_title, $list);}
 
 
manussa_loka on September 4th, 2006 08:03 am (UTC)
Hi, I'd just like to know how to combine another sidebar box with this code?

this is my code, it's just the above really: http://www.livejournal.com/customize/advanced/layerbrowse.bml?id=6613214

and now where do I add everything in this post?

thank you.
 
Snakelingsnakeling on September 4th, 2006 09:01 am (UTC)
Between END TAG CLOUD CODE and Specify Box Order, add the code for extra boxes from the tutorial. Then in the box order list, add the lines to call the boxes you added where you want them. They're the lines beginning with print_sidebar_boxes... :)
 
(no subject) - manussa_loka on September 4th, 2006 09:39 am (UTC)
 
 
◕ ◡ ◕chasethestars on September 8th, 2006 11:26 pm (UTC)
Thanks so much for providing this. I love having a tag cloud. I think it functions better and it takes up less room than a list does. I added it to my journal a few months ago. I meant to say thank you sooner, but better late than never?
 
shiny happy glowyafuna on September 9th, 2006 05:05 pm (UTC)
Out of sheer curiosity, is this comment related to this?

(PS. Know I owe you comments in another thread. Will reply to those soon :))
 
(no subject) - chasethestars on September 9th, 2006 06:44 pm (UTC)
 
(no subject) - afuna on September 9th, 2006 07:16 pm (UTC)
 
(no subject) - chasethestars on September 9th, 2006 10:17 pm (UTC)
 
(no subject) - afuna on September 11th, 2006 01:48 am (UTC)
 
 
elira_wiken on December 18th, 2006 04:09 am (UTC)
I did this once before, but I can't rmember how I did it. I have the theme layer for I have a header. Now if I want to put this in where would I put it? And what do I need?
 
Snakelingsnakeling on December 18th, 2006 05:51 am (UTC)
If you want a tag cloud in the sidebar, save yourself the bother and simply use the Customising wizard, since the code has been added to Flexible Squares.

If you want the tags page cloud, you need to copy-paste the code at the end of your theme layer :)
 
(no subject) - elira_wiken on December 18th, 2006 09:42 pm (UTC)
 
 
CrystalSC: angelsexy1crystalsc on December 27th, 2006 07:08 pm (UTC)
Thank you so so so much for this! I was utterly lost on how to add a tag cloud! But now I have one! :) I just need to figure out how to change the link color now....I think that's in the code of my external stylesheet that someone else was kind enough to make. :) Thanks again! :)I will credit the community in my userinfo.
 
Flexs2flexisquared on December 28th, 2006 10:52 am (UTC)
If you just want to add the tagcloud to your sidebar, there's a built-in tagcloud in Flexible Squares now. You can select it via under the sidebar tab in custom options. *g*

The instructions here are still useful for the TagsPage, in case you want to put the tagcloud there too.
 
(no subject) - crystalsc on December 28th, 2006 01:04 pm (UTC)
 
(no subject) - s2flexisquared on December 29th, 2006 07:10 pm (UTC)
 
 
Belenen: queen of codebelenen on January 9th, 2007 11:22 am (UTC)
I use Opal, though -- trying to figure out how to get the same effect in my tags box in Opal. kunzite1 ^ gave instructions for the tags page tagcloud in opal so I was hoping he also could help me with the sidebar tagcloud. Do you know of anywhere to point me? (besides the Opal comm, already tried there)
 
Snakelingsnakeling on January 9th, 2007 11:58 am (UTC)
Sorry, I don't know opal at all :/ Most everything of the tag cloud code is portable to other layouts, though, so you might try finding a tutorial to add boxes to the sidebar in opal, and add the tag cloud code. But people on the Opal comm will be much more able to help you.