WordPress plugin: WP-Cumulus Flash based tag cloud

I love tags. I think it’s a brilliant idea to tag blog post. Not so much because I feel it enables people to find information they’re looking for, but because tag clouds usually offer a more adventurous mode of navigation. If I click on a tag called “water” there’s no way of telling whether I’m going to end up reading about water shortages in the third world or the chemical composition of rain. And I like surprises.

What I do not like however, is the way tag clouds traditionally look. Enlarging the font for often-used tags causes all sorts of line height weirdness, which bugs me. This why I started experimenting with Flash to see if I could come up with something better looking. I’m so happy with the initial results I decided to post them here. Both the movie and the plugin itself need loads of work, but please feel free to tell me how you like it so far.

P.S. The tag cloud displayed by the movie is this site’s actual ‘live’ tag cloud, and yes, if you manage to click a tag the page for that tag will open… :)

P.P.S. You can download the plugin here. The FAQ should answer most of your questions.

Related posts:
  1. How to repurpose my tag cloud Flash movie
  2. Finally, a new WP-Cumulus update
  3. WordPress plugin: Tagnetic Poetry
  4. WordPress plugin: Flash Message Board
  5. WordPress plugin: this.player
Roy | March 6, 2008 | English,Flash,Internet,WordPress plugins | Comments (393)
Tags: , , , , ,

393 Comments

  1. HI

    I liked the plugin, but I have few questions in mind. Can we change the animation type,like now it is looking too overlapped, and also will it be SEO friendly?

    Comment by Vaishali Kapote — June 17, 2009 @ 7:05 am

    • Hi Viashali. SEO is affected somewhat because by default the regular html tag cloud is hidden through CSS. In the latest version there’s an option to unhide it if you want. The ‘distribute evenly’ setting will make tags overlap a lot less, and you could also consider lowering the total number of tags though the wp_tag_cloud options.

      Comment by Roy — June 17, 2009 @ 10:36 am

  2. I wondered if someone would be kind enough to share the file base. fla (editable flash) I need it for work of the faculty (faculty of architecture and urban design – santa fe – argentina) only need to edit to build an interactive menu. I would give all credit to usted.Sorry for not knowing English well. thanks. THANKS ROY now.

    Comment by martin — June 17, 2009 @ 2:09 pm

  3. Hi Martin. The fla is available from wordpress.org/extend/plugins/wp-cumulus/download. Get the ‘developer version’. Please keep in mind that this project is open source, which restricts your options for redistribution somewhat.

    Comment by Roy — June 17, 2009 @ 6:22 pm

  4. hello good morning sir, am preetham, i saw your invention its amazing, sir actually i need a help from you, sir am dwveloping a website by using asp.net and c#, sir i need to capture a visitors image at client side, so am thinking of using a flash, because it will work on client side( i need to access clients webcam), so till now am able to display the live video from the webcam, i took it from some other site, but i need to stop the displaying video on the screen, and to capture the image display in the flash, and to save that image to server, sir am stranger to flash technology, so please help me regarding this, or you just send me some links where i can find the solution,……. thanks in advance sir……
    i am waiting for your response……..

    Comment by preetham — June 18, 2009 @ 8:24 am

    • Hi Preetham. I’ve yet to come across a good tutorial for that. It’s the kind of thing that would be easy using Flash Media Server, but not with just Flash. This tutorial might help, but it sends the image as pixels, which is terribly inefficient.

      Comment by Roy — June 18, 2009 @ 9:09 am

  5. I’ve found a tool, ajax based, that gets rid of the need to write any xml wrapper for other systems. It simply converts any html tag cloud to your flash tag cloud and vice versa:

    http://www.artviper.net/html-tag-cloud-to-flash-converter.php

    Very easy and straightforward.

    cheers
    James

    Comment by James — June 19, 2009 @ 9:14 am

  6. Hi James. The artviper people again… They’ve created derived works before, and it seems this is another violation of the GPL license. They are obligated to bundle the source code for the Flash movie, or at least provide a download link for it. They’ve also removed my copyright notice.

    I’m assuming their flash movie is based on mine because I decompiled a previous effort of theirs and found some very familiar code inside. Unsure what to do about all this though.

    Comment by Roy — June 19, 2009 @ 11:29 am

  7. Hi Roy,

    hm, I just wrote them and they agreed to add the sources to their distribution package. They also said that the source is revamped of yours, but they are not charging anything for it nor do they claim the cloud to be theirs. I’ve just downloaded the pack and in ImageCloud.as it says “orignal taken from http://www.roytanck.com – modified by artviper.

    So can I use this now or would that be a violation of your terms?
    Furthermore, what about the script I’ve been reporting about, rendering any xml wrapper obsolete?

    cheers
    James

    Comment by James — June 19, 2009 @ 1:23 pm

  8. Roy surprising …
    I managed to basically understand the get-wp comulus but I have not been able to get the my flickr widget. Is it necessary to link the images to http://www.flickr.com/ or you can do to a url inside my computer?
    thanks roy

    Comment by martin — June 19, 2009 @ 1:31 pm

  9. Hi James. I’d like to be credited outside the source code, which no one will ever see, other than developers. But I’ll admit I’m not sure I could make you. They’re not so much ‘my’ terms, GPL is a complicated license that governs the entire free software movement.

    One thing that would definitely be required is that you allow everyone who downloads the project to redistribute it. Since it’s a free download I assume you’re OK with that.

    I quite like what you’ve done with the wrapper. I’ve seen something similar done in Javascript a while ago and I’m looking into applying something like that to my plugin if it makes it more robust. It’s not that I don’t like your project or want to obstruct you in any way. I’d just like to keep it legal.

    Comment by Roy — June 19, 2009 @ 2:30 pm

  10. Hi Martin. The Flickr widget has a little brother that lets you run it off your own website. It’s a little more DIY than the hosted version. ( http://www.roytanck.com/2009/04/09/introducing-photo-widget-floating-thumbnails-for-your-website/ )

    Comment by Roy — June 19, 2009 @ 2:32 pm

  11. Hello Roy
    We are grateful for the chance to explore this work. I wanted to ask if we may use these codes to build the website of the library of our faculty. THIS IS THE LINK http://www.fadu.unl.edu.ar/ (among others your name and link to your website)
    We could not edit the font in WP_Cumulus (Tag.as on file at line 58)
    and you do the last question. Is it possible to generate a link between WP-Cumulus and the widget and that widget appears as a window in front of WP-Cumulus?
    A million thanks and Excuse for not knowing English well. THANKS ROY

    Comment by martin — June 23, 2009 @ 9:44 pm

    • Hi Martin. You’re perfectly welcome to use Cumulus on any site as long as you don’t sell the template or distribute it without sources. Proper credits would be appreciated.

      Did you see this tutorial about adding fonts and characters? You need to change the font in two places and make the makes match exactly.

      As for your last question, I’m not quite sure what you’re saying. WP-Cumulus itself is (in many cases) a widget. Because it’s Flash it’s not so easy to put anything over it, but the code can be hacked to open new windows or popups.

      Comment by Roy — June 24, 2009 @ 10:30 am

  12. Hi Roy
    I again thank custom fonts.
    My second question is how and where to set the size of new windows (popups) on the first window.
    thanks Roy

    Comment by martin — June 24, 2009 @ 2:22 pm

    • Hi Martin. Since the clicks are handled by Flash you’d need to rewrite the Tag.as clickhandler function to make it call a javascript function. Yuo could either call window.open directly or through a function.

      Comment by Roy — June 24, 2009 @ 2:41 pm

  13. Hi!
    First, great plugin! looks very nice!
    I was woundering if there is something similar, or mabye u got what i need allready.
    I want this but it scould be with links, only links to other sites, and nothing about my blog and tags and stuff… Why? Becouse i dont use the blog as a blog, iam not “bloging”, and I was just thinking of having links in a cloud, like this one, in the sidebar.
    I woulde be greatful if u could help me :)

    Cheers
    Kim

    Comment by Kim — June 27, 2009 @ 12:21 am

  14. sir I appreciate your effort so I must ask what one has to do to display the tagcloud? I unzipped the folder in the wp-content/plugins folder, I activated the plugin, I checked out and changed some minor options from Settings->Wp-Cumulus…

    but I couldn’t find any option to place the tagcloud on any specific place, neither is displaying at all.

    What -I- am doing wrong?

    Comment by eliezer — June 28, 2009 @ 1:56 am

  15. nevermind,

    =)

    is working GREAT!

    Comment by eliezer — June 28, 2009 @ 2:00 am

  16. Hi Roy,

    can I use your Cumulus Tag-Cloud Plugin without WordPress as well?
    I would like to use it on my personal page, however I don´t have WordPress running there (my hosting plan does not support it) and I also don´t have php.
    Flash is supported and I can upload files via FTP.
    I would like to use is with “static” links, so no live tags or anything. I thought about placing the links in an xml file or so and that the flash is using the information in the xml to display the cloud.

    Is this possible?

    Thanks
    Mark

    Comment by Mark — June 29, 2009 @ 6:48 am

    • Hi Mark. Yes you can. The example files are here.

      Comment by Roy — June 30, 2009 @ 10:39 am

  17. Thanks Roy – the finest plugin I’ve ever come across.

    Comment by Bill Hunt — July 5, 2009 @ 8:46 pm

  18. Thanks Roy , i wana use it in website

    Comment by GlobalEye Glasses — July 6, 2009 @ 9:50 am

  19. Hi there,

    I have just accessed my site on another computer and I notice that the plugin background seems to be broken and is just appearing as a huge white box (normally it’s transparent).

    Worried that everyone else is seeing it like this, could you have a look?

    http://bit.ly/Evz0M

    Thanks!

    Comment by John — July 6, 2009 @ 12:49 pm

  20. EXCELLENT plugin, I spent hours just makin’ It spin! XD

    It’s there a way to add a border to the tag cloud? (I mean, to the entire cloud block itself (except the header) not to each tag).

    Thanks a lot ^^

    Comment by Sebastián — July 8, 2009 @ 11:33 pm

  21. Hi!

    First of all, it’s a great plugin! I love it!

    But my page doesn’t load in Internet Explorer anymore:s it says : operation aborted if i try to open my website in IE…. any ideas?:s

    Comment by Kirsten — July 10, 2009 @ 9:00 am

  22. Hi!

    is it possible to integrate lightbox/shadowbox into the cloud? I didn’t manage, but it would be extremely cool if one could do so :)
    (i’m using the cloud on regular server)

    Comment by Markus — July 16, 2009 @ 11:17 am

    • Hi Markus. Because Flash handles the clicks, integrating with javascript based things isn’t as easy as it could be. But depending on which lightbox you pick it should be possible to hack the movie to call the right js function.

      Comment by Roy — July 18, 2009 @ 6:33 pm

  23. Very cool. Thank you.

    Comment by izzet — July 27, 2009 @ 9:32 am

  24. > “What I do not like however, is the way tag clouds traditionally look. Enlarging the font for often-used tags causes all sorts of line height weirdness, which bugs me.”

    Hence this flash based tag cloud sacrifices the previously easily understood information about tag counts in favour of a cool but gimicky 3D effect.
    An flat version of “Cumulus” on an infinite 2D plane would get rid of line heights weirdness, could include tag count information via font-size and would still look pretty cool.

    Comment by Kolya — August 4, 2009 @ 2:55 pm

  25. Great Plugin. Awesome piece. Works fine on 2.7.1. and I guess it will do well on 2.8.4 too.

    Comment by ELEx — August 12, 2009 @ 10:11 pm

  26. I wonder why the word “Flash” appears twice in the bubble…

    Comment by Ken — August 14, 2009 @ 8:00 pm

  27. Hmm, looks like “WordPress plugins” is there twice, as well. My first thought was that everything was in there twice (once on each side of the sphere), but nothing else seems to be doubled.

    Comment by Ken — August 14, 2009 @ 8:01 pm

  28. @Ken. One is a category, the other a tag. I try to not have the same text as both, but there are a few of these double ones.

    Comment by Roy Tanck — August 15, 2009 @ 3:43 pm

  29. Hiya,

    First – love the plugin!

    Second – i have no hair left. I’m trying to get the tags to open in a new window/frame. I have tried to edit the source filed but cant do it . Can anyone give me a step by step method to edit the source files to achieve this?

    Thanks all!!

    jon
    =0)

    Comment by Jon — August 15, 2009 @ 5:52 pm

    • Hi Jon. It’s really not that hard if you have Flash CS3 or better.

      1. Download the development version (at http://www.wordpress.org/extend/plugins/wp-cumulus/download ).
      2. Open the flp file in Flash.
      3. From the project panel, open Tag.as.
      4. Find “_self”, replace with “_blank” or whatever suits your needs.
      5. Publish the project and use the resulting swf file to overwrite the default one on your server.

      Hope this helps.

      Comment by Roy — August 15, 2009 @ 7:46 pm

  30. Link: 自由生活 » WP Cumulus 超酷的3D立体效果的标签云插件

  31. Thanks so much!!! Giving it a try now!!!

    Jon

    =0)

    Comment by Jon — August 16, 2009 @ 9:00 pm

  32. Hiya –

    Tried your method and i cant get it to work. Im using a trail verison of CS4 and it won’t open the flp file. Ive read adode has done away with the flp extension in CS4 so im gona try and get a CS3.

    Thanks for you help!!!

    Jon

    Comment by Jon — August 17, 2009 @ 8:45 pm

    • @Jon: An flp is simply a project file that contains links to other files. You can simply open the fla directly and edit the classes.

      Comment by Roy — August 18, 2009 @ 11:41 am

  33. Great plugin, I was having some unsightly tag issues at the bottom of my blog, downloaded your plugin and used the widget, got it up and looking the way I want within 5 minutes.

    Thank You Roy.

    Paul

    Comment by shopNbag — August 20, 2009 @ 10:12 pm

  34. Hi Roy,

    Love the work you’ve done with WP-Cumulus, it’s fantastic!

    I installed it on my blog, but the flash is not showing and instead I get the HTML cloud… So what did I miss? I followed the instruction and I see the Widget and I can change all the settings. My blog is with the 2.8.4 version of WordPress.

    Thanks,

    Bernard

    Comment by Bernard — August 21, 2009 @ 7:44 pm

    • H Bernard. It looks like you’re using the regular tag cloud widget instead of the WP-Cumulus one. WP-Cumulus works fine on WP 2.8.4 btw.

      Comment by Roy — August 22, 2009 @ 7:10 am

  35. Hi,

    I’ve rechecked everything and it’s not working.

    Comment by Bernard — August 22, 2009 @ 2:19 pm

  36. Well…. I now have it going on!!! Thanks again for this great work!!!

    P.S. I had to delete the widget that installed itself on the installation, I drag and drop the widget and it finally showed me the properties. Now, it’s working!

    Comment by Bernard — August 24, 2009 @ 3:48 pm

  37. Thank you very much, this is very good looking for Tag cloud
    and make all theme look better with dynamic move

    Comment by Jade — August 25, 2009 @ 4:35 am

  38. Roy – I stumbled on this late, so I guess I may enjoy the advantage of playing with this outstanding tool starting at a higher state of its evolution. From what I’ve read you have a lot of excited and grateful fans. Thanks for your contribution!

    Comment by James — August 26, 2009 @ 9:53 am

  39. Hi Roy,

    I am so excited by the code you have provided. I edited some of the stuff, and it worked without any problem. With no hassel nor any problem, I was able to edit the code and do the way I like. Really A great plugin. Thank you soooooooo much Roy, You are the best.

    Roy, I want to change the text color. like each tag, should have a different color. Like I have to go through each and every peice of code. If you give a suggestion and tips on the code location where I need to change, would be really helpful. Anywaz your blog is 2 gud in its own way. And the plugins. Wow the best.

    Thanks a lot again, Can I post the same contents in my blog with link to your website? And the way I followed to edit the contents?. Is it ok Roy?.. I am just a bigginer and want your suggestion on my blog stuff.

    Regards,
    Vishwesh

    Comment by Vishwesh — August 30, 2009 @ 12:59 pm

    • Hi Vishwesh. WordPress does not have a way of associating colors with tags. Nontheless, the Flash movie supports a ‘color’ attribute in the XML. If you’re using it outside of WP, simply use color="0xff0000" to get a bright red tag. There’s even a ‘hicolor’ attribute to control the hover color.

      If you’re using WP, there’s not a lot that can be done. I’ve created the gradient color option so you can have all tags be a color inbetween two values, based on their importance. Totally random colors may also be an option, but require a bit of coding.

      Comment by Roy — September 1, 2009 @ 2:09 pm

  40. love the tag cloud – fantastic – solved a problem for me and thank you
    paul

    Comment by paul barton — September 1, 2009 @ 5:21 pm

  41. Great plug-in! Thanks. Tom

    Comment by Tom Turner Jr — September 12, 2009 @ 1:37 am

  42. This is an awesome feature that is not just “eye candy”! It is useful and safes space!

    To confirm, WP does not render random color tags? If this is the case, could you provide the code? I am trying to simulate the tag sphere from here: http://www.archeryaddix.com/

    BTW, the plugin seems to be just fine on WordPress 2.8.4.

    Rudy

    Comment by Rudy — September 15, 2009 @ 1:20 am

    • @Rudy: It looks to me like the tag cloud on that page simply uses the gradient option in WP-Cumulus, with well-chosen begin and end colors. This options picks the tag colors from a user-defined gradient based on tag importance.

      Comment by Roy — September 15, 2009 @ 9:19 am

  43. Link: 最实用的9个中文WordPress插件推荐 | 網絡漫游——在互联网的世界里慢漫游走

  44. great!!! ill give it a try!

    Comment by kilinkis — September 23, 2009 @ 5:51 pm

  45. Your tag cloud is awesome, this is already hugely popular I see, I can’t wait to add it for my new site I am currently developing, named http://www.YouTestTubeBaby.com I will be sure to tweet this throughout the twittersphere.

    Comment by Juan L. Pabellon 3rd — October 9, 2009 @ 9:19 am

  46. Link: 最实用的9个中文WordPress插件推荐 - 反思空间

  47. hi, i love WP-Cumulus but i have a problem. I use dynamic sidebars, and i´d like to have 2 wp-cumulus widgets.

    In the home page i use one sidebar with wp-cumulus, but in single post i use a diferent sidebar but i can´t add another wp-cumulus widget

    Comment by Archer — October 11, 2009 @ 1:09 am

    • Hi Archer. Cumulus is indeed limited to a single instance of the widget. You could try creating a text widget with the shortcode version in it, but you may need to hack your theme as described here.

      Comment by Roy — October 12, 2009 @ 9:20 am

  48. perfect, it worked, big thanks

    Comment by Archer — October 13, 2009 @ 1:29 am

  49. I just wished to thank you so much for this awesomely cool idea :) I just love your Flash-based tag cloud! Yes, I’m also always frustrated about the “regular” tag cloud which always has problems with the font size… your solution is geeky, aesthetically pleasing, and fixes everything nicely, while making the page entertaining at the same time!

    Comment by Gwyneth Llewelyn — October 19, 2009 @ 1:12 am

  50. Link: 菜鸟学飞 » Blog Archive » 最实用的9个中文WordPress插件推荐
« Older Comments
Newer Comments »