ImageCloud plugin
- October 6th, 2009
- Posted in Website
- Write comment
During my work I got confronted with Wordle. A colleague used Wordle to show what a specific website was about. I got interested in how these beautiful word clouds were made and if I could add them to my own website.
Regrettably, the Wordle algorithms cannot be shared by the author because of intellectual property reasons (IBM owns his work). Given the popularity of Wordle, I found it strange that no WordPress plugin existed that would generate similar word clouds. Searching the web for similar algorithms didn’t provide me with much answers either. But hey, how hard can it be? I decided to have a go at it myself.
What’s a word cloud? Basically it is a set of words fitted closely together in a oval shape. The words are of different sizes depending on their frequency in the corresponding text. Furthermore, the words may be of different colors and have different angles. I quickly decided I would support two angles only: horizontal and vertical words. The words would be different in size, and also the colors would match the frequency.
The algorithm is then relatively straightforward:
- calculate the font-size and color depending on the frequency of the words.
- calculate the size of the boxes that will contain the words. In PHP that is easily done using the GD library
- place the first box at coordinate (0,0).
- Add the coordinates of the box corners to a list
- Sort the list of corners based on their eucledian distance to the origin (0,0), keeping in mind the wanted oval shape of the cloud
- Place the next box to the first corner coordinate where the box doesn’t overlap already placed boxes
- Add the corners of the newly placed boc to the coordinates list
- Continue until all boxes are placed
Given this algorithm, create a few classes (Point, Box, Cloud, Word and WordCloud) that implement all this. Add some image generation code and caching of the results (it does take some time to create and position all the words) and you’re done! To integrate it with WordPress I used one of the tag cloud hooks (if you’re looking for hooks in WordPress Adam R. Brown keeps a great hooks database) . This hook provided me with all the information I needed: the tags, the links to those tags, the frequency numbers, etc. Furthermore, the wp_tag_cloud functions already support multiple formats so adding a new one was quite trivial. As a finishing touch I added a shortcode, so I didn’t need to go into a theme to change the tag cloud arguments to get my image cloud shown.
The plugin can be found on the WordPress extend site: http://wordpress.org/extend/plugins/imagecloud/
Two example can be found here and here.
It was fun creating this plugin. Hopefully you like the results. Feedback is always welcome!
Joost
Thx for this plugin, i try to active it, but it’s awsome, very thx!
Sorry for multi comments, but the plugin not works with 2 words tags like “star wars” or “kill bill” .
sorry for my english…
you can have an example on my blog
not working with tags “star wars, black hattitude, suicide girls, storm troopers”
thx for your fantastic job!
Hi epunk,
Thanks for the feedback. I made a fix and posted it to WordPress (version 1.2). If you upgrade your plugin. It should be working fine.
If you care about the details: I noticed that the spaces where encoded as + signs, and not as %20 in the URLs. This made that image was correctly generated, but the url was wrongly decoded to “star+wars_.gif” instead of “star wars_ .gif”
Hi joost,
Thanks for the plugin , its great.
I wanted to know whether we can use more than two colors for the font , in the tag cloud.
Varun,
Sorry, but the cloud currently supports two color gradients only. I’ll put it on the wishlist for a next release…
Regards,
Joost
Freackin awesome.
Keep up the good work!
great plugin! however, I notice it’s not showing all of my tags. Is there a minimum # of posts or a max # of tags it will display? Any way to change that or have a setting for All?
Hi,
By default Wordpress will only show the first 45 tags in a wordcloud (see wp_tag_cloud documentation on WP codex) . This plugin does nothing else. The number parameter can be used to change that amount of tags displayed. To have it display all your clouds add the number=0 setting to your cloud.
Hope this helps,
Joost