EllisLab text mark
Advanced Search
1 of 3
1
   
Taggly, a tag-cloud library
Posted: 06 November 2007 06:45 PM
Avatar
Joined: 2007-05-29
29 posts

Hey Everybody,

I’ve been working on one of my first libraries for CI called Taggly. Taggly is used to easily create tag-clouds. You can also control how your tag-cloud is created by setting configuration options.

You can download Taggly, along with its user guide here:
Download Taggly

============================================

What is a Tag-Cloud?
A tag-cloud is a collection of text links with varying size (and sometimes color) based on their popularity. Sites such as Flickr, Delicious and Tag-A-Cloud use this concept.

What does it look like?
See Taggly in action

What is the syntax?
The syntax in its very basic form is this:

$myArray = array (
    array(
10'PHP''http://php.com'),
    array(
32'MySQL''http://mysql.com'),
    array(
5'CSS''http://css.com')
);

echo 
$this->taggly->cloud($myArray); 

You can get more complex by passing configuration parameters:

$configArray = array (
    
'min_font' => 20,
    
'max_font' => 60,
    
'html_start' => '<li>',
    
'html_end' => '</li>',
    
'shuffle' => TRUE,
    
'class' => 'my_css_class'
);

echo 
$this->taggly->cloud($myArray$configArray); 

Taggly Output
Taggly creates and returns links with defined sizes based on the data given in your array.

An example output:

<a style="font-size: 21px" class="taggly" href="http://example.com" title="Hue">Hue</a>
<
a style="font-size: 18px" class="taggly" href="http://example.com" title="Image Ready">Image Ready</a>
<
a style="font-size: 33px" class="taggly" href="http://example.com" title="Background">Background</a>
<
a style="font-size: 33px" class="taggly" href="http://example.com" title="CodeIgniter">CodeIgniter</a>
<
a style="font-size: 16px" class="taggly" href="http://example.com" title="Encode">Encode</a>
<
a style="font-size: 23px" class="taggly" href="http://example.com" title="Depth">Depth</a>
<
a style="font-size: 29px" class="taggly" href="http://example.com" title="Grafix">Grafix</a>
<
a style="font-size: 18px" class="taggly" href="http://example.com" title="Adobe">Adobe</a

You can find more information in the User Guide included in the Taggly download package.

 
Posted: 06 November 2007 07:27 PM   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2007-02-08
409 posts

Hi Gavin,

Funny that you have released this as its on my writeboard as something I need…. Now it is gone :D

I am going to give it a run…


Thanks Gavin,
-Lee

 Signature 

you’ve got that sexy Canadian thing working for you… - Derek Allard


Pancake Payments | http://DearIE6.com
http://twitter.com/thatleeguy

 
Posted: 07 November 2007 12:09 AM   [ # 2 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-29
29 posts

Hey Lee,

Glad it could help you out! Let me know if you have any trouble with it. I’ve tried making it as user friendly as possible. smile

Any suggestions you may have would be appreciated.

Gavin

 
Posted: 07 November 2007 12:54 AM   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2007-02-08
409 posts

Can you make it butter toast?

Seriously though… a demo maybe so someone can see what you envision before having to download and code it in.

-Lee

 Signature 

you’ve got that sexy Canadian thing working for you… - Derek Allard


Pancake Payments | http://DearIE6.com
http://twitter.com/thatleeguy

 
Posted: 07 November 2007 07:09 AM   [ # 4 ]   [ Rating: 0 ]
Avatar
Joined: 2007-09-25
833 posts

I have never come across the tag cloud concept, so I had to hunt google to find out.. so I agree a demo/quick explanation would be useful.  this link provides a quick explanation

 
Posted: 07 November 2007 11:48 AM   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-29
29 posts

Hmm, yea I guess I didn’t think of that. A demo would be beneficial. I’ll get started on one and post it soon.

Thanks Lee and gtech

 
Posted: 07 November 2007 12:21 PM   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-29
29 posts

Ok, I’ve updated my first post with a demo and some syntax examples. Hope that helps smile

 
Posted: 07 November 2007 05:32 PM   [ # 7 ]   [ Rating: 0 ]
Avatar
Joined: 2007-09-20
346 posts

Nice job Gavin.

Can you make a wiki page also please?

 Signature 

Twitter

 
Posted: 07 November 2007 05:34 PM   [ # 8 ]   [ Rating: 0 ]
Avatar
Joined: 2007-04-18
120 posts

Thanks Gavin!

 
Posted: 07 November 2007 06:30 PM   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-29
29 posts

Wiki page created. Taggly Wiki.

 
Posted: 07 November 2007 06:37 PM   [ # 10 ]   [ Rating: 0 ]
Avatar
Joined: 2007-09-20
346 posts

Thanks again…!

 Signature 

Twitter

 
Posted: 07 November 2007 07:16 PM   [ # 11 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-29
29 posts

Welcome :D

 
Posted: 07 November 2007 07:50 PM   [ # 12 ]   [ Rating: 0 ]
Avatar
Joined: 2007-02-08
409 posts

I will send you the link once I have it implemented…

Looks good!


-Lee

 Signature 

you’ve got that sexy Canadian thing working for you… - Derek Allard


Pancake Payments | http://DearIE6.com
http://twitter.com/thatleeguy

 
Posted: 08 November 2007 01:25 AM   [ # 13 ]   [ Rating: 0 ]
Avatar
Joined: 2007-06-07
690 posts

Nice Gavin, this looks like something I could implement with JTaby for tags, thanks

p.s. nice blog smile

 Signature 

jtaby.com

 
Posted: 08 November 2007 01:48 AM   [ # 14 ]   [ Rating: 0 ]
Avatar
Joined: 2007-02-08
409 posts

JTaby? Whats that?

:p


-Lee

 Signature 

you’ve got that sexy Canadian thing working for you… - Derek Allard


Pancake Payments | http://DearIE6.com
http://twitter.com/thatleeguy

 
Posted: 08 November 2007 11:58 AM   [ # 15 ]   [ Rating: 0 ]
Avatar
Joined: 2007-05-29
29 posts

Thanks Zaatar smile If you do implement with JTaby, I’d be curious to see it.

Also, I thought of a possible ‘upgrade’ to Taggly last night. After looking through other sites using the tag-cloud concept, I noticed several use CSS styles to define the size and color instead of embedding it right in the tag.

So:

<a href="http://..." style="font-size: 12px">Example</a

Becomes:

<a href="http://..." class="small_font">Example</a

This way you can define an array of styles to be used instead of font-sizes allowing you to not only apply font sizes, but other CSS styles too (color, text-decoration, background etc.).

.small_font {font-size12pxcolorred;}
.medium_font {font-size20pxcolorblue;}
.large_font {font-size30pxcolorgreenfont-weightbold;

The logic would be a bit tricky, because you should be able to define any amount of styles to be used and still just pass an array of tags (I love expandability).

Does that make sense? What do you guys/gals think? Is this something wroth implementing?

 
1 of 3
1