WP Cumulus

A little while ago I posted a Flash based tag cloud frontend here that was hoping to convert into a plugin for WordPress. I had some time on my hands tonight, so I decided to finish it. The actionscript needed a major overhaul, and in order to allow decent integration into as many layouts as possible the plugin itself needed an options page. Thanks to WP’s brilliant documentation, and lots of helpful posts by people who’s PHP skills far exceed mine, it’s now done.

Download WP Cumulus 1.02.

Version Changes
Version 1.02 Fixes issues with sites not loading after activation, reduces server load and fixes lost spaces in tags. Thanks to Dimitry for helping me debug these issues.
Version 1.01 Fixes an issue where the cloud would spin out of control when the browsers loses focus on OSX.
Version 1.00 Initial release version.

See it in action here.

Here’s what you should know about “WP Cumulus”:

Installation

  1. Make sure you’re running WordPress version 2.3 or better. It really won’t work with older versions. Really.
  2. Download the zip file and extract the contents.
  3. Upload the “wp-cumulus” folder to your plugins directory (wp-content/plugins/)
  4. Activate the plugin through the ‘plugins’ page in WP.
  5. See “Options->WP Cumulus” to adjust things like display size, etc…

Using WP Cumulus

In order to actually display the tag cloud, you have two options.

  1. Create a page or post and type [WP-CUMULUS ] anywhere in the content, but without the space before the last bracket. This ‘tag’ will be replaced by the flash movie when viewing the page.
  2. Add the following code anywhere in your theme to display the cloud. <?php wp_cumulus_insert(); ?> This can be used to add WP Cumulus to your sidebar, although it may not actually be wide enough in many cases to keep the tags readable.

About the options

WP Cumulus options screen

The options page allows you to change the Flash movie’s dimensions, change the text color as well as the background. It also allows you to disable the automatic insertion of the SWFObject javascript file into the header of your blog.

Width of the Flash tag cloud
The movie will scale itself to fit inside whatever dimensions you decide to give it. If you make it really small, chances are people will not be able to read less-used tags that are further away. Anything up from 500 will work fine.

Height of the Flash tag cloud
Ideally, the height should be something like 3/4 of the width. This will make the rotating cloud fit nicely, while the extra width allows for the tags to be displayed without cropping. Text is horizontal by nature, which is why the ideal aspect is slightly landscape even though the could is circular.

Color of the tags
Type the hexadecimal color value you’d like to use for the tags, but not the “#” that usually precedes those in HTML. Black (000000) will obviously work well with light backgrounds, white (ffffff) is recommended for use on dark backgrounds.

Background color
The hex value for the background color you’d like to use. This options has no effect when “Use transparent mode” is selected.

Insert SWFObject include into header
SWFObject is a brilliant piece of javascript that embeds Flash movies into HTML. It’s so good even Adobe themselves use it. Problem is that in order to use it, a line of code needs to be added to the header of your blog. Some themes and plugins already use SWFObject, in which case it does not need to be inserted into the header again by WP Cumulus. Check the source code to see if SWFObject is present in your site’s header more than once, and deselect this setting if it does.

Troubleshooting / issues / other

I see a regular tag could and a line of of text about how I need the Flash plugin
It appears you either do not have Flash Player 7 or better installed, or you’ve disabled javascript. If you’re absolutely positive that both are available, try enabling the “Insert SWFObject include into header” setting in the WP Cumulus options page.

Hey, but what about SEO?
I’m not sure how beneficial tag clouds are when it comes to SEO, but just in case WP Cumulus outputs the regular tag cloud for non-flash users. This means that search engines will see the same links.

I’d like to change something in the Flash movie, will you release the .fla?
No. You can contact me about doing custom versions if you like, but I won’t be releasing the source code for the Flash movie.

My theme/site appears not to like this plugin. It’s not displaying correctly.
First thing you should try is to turn off the “Insert SWFObject include into header” option. This will probably render the plugin inoperable, but your blog should still work. If this fixes the issue then please try adding the SWFObject code manually into your blog’s header.php (just before the </head> tag, and only if it’s not already there).

<!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/ -->
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/wp-cumulus/swfobject.js"></script>

Some of my tags occasionally hit the sides of the movie and are cropped
If this happens you should change the aspect for the movie to make it wider. This can be done by increasing the width, but also by decreasing the height. Both will make the movie “more landscape” giving long tags more room.

Some characters are not showing up
Because of the way Flash handles text, only Latin characters are supported in the current version. This is due to a limitation where in order to be able to animate text fields smoothly the glyphs need to be embedded in the movie. Replacement Flash movies with several other character sets are available:

To use them, simply copy it over the original “tagcloud.swf”.

I’m not using WordPress…
Steve Springett has ported this to Movable Type. More info over on his site.

It seems that some people are experiencing difficulties with this plugin. If you too are affected by the “it kills my blog” issue, please email me at roy-dot-tanck-at-gmail-dot-com. Please include the version of WordPress you’re using, the version of PHP installed on your server and wether or not PHP is running in safe mode.

If you’re a PHP developer and want to help solve this, please email me also. I’m primarily a designer, and can use all the help I can get when it comes to PHP.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • StumbleUpon

Filed under: English, WordPress plugins | Tags: , , , , | Roy | March 15, 2008

53 Comments

  1. Fantastic. Thanks for releasing this. As soon as I saw your first post about it I hoped you’d get this into a plugin. Great work.

    Comment by Neil MacLean — March 15, 2008 @ 10:39 pm

  2. hey roy..
    i like the idea but i’m losing my style sheet when i activate your plugin? i’m up to date version wise.. i’ve got very few plugins enabled..? have you heard anything similar?

    Comment by david windham — March 16, 2008 @ 4:14 pm

  3. @David: There appears to be a closing tag missing for one of the scripts in your blog’s header. Apparently my plugin adding further code to the header caused that to act up. I’m pretty sure that if you fix that, WP Cumulus will work fine.

    Comment by Roy — March 17, 2008 @ 9:31 am

  4. Thank you, thank you, thank you! Now this is what I call a tag cloud. Works like a charm. Initially I had the same problem as David but I was able to fix it. In my case it was the lightbox plugin that interferred with the wp_cumulus

    @David: Look at your source code without the wp_cumulus on your page. You will see which plugin is ‘incorrect’. Disable it and put the wp_cumulus code back in.

    Comment by Richard — March 17, 2008 @ 4:43 pm

  5. […] Download WP Cumulus here SHARETHIS.addEntry( { title: “A new type of tag cloud: WP Cumulus”, url: “http://mindplunge.com/2008/03/17/a-new-type-of-tag-cloud-wp-cumulus/” } ); […]

    Pingback by mindplunge » Blog Archive » A new type of tag cloud: WP Cumulus — March 18, 2008 @ 9:30 pm

  6. Hi,

    Thanks for a fun plugin!

    But I can’t seem to get this working. My blog is in Japanese. Will it work with multi-byte? I’ve tried using the other tagcloud.swf as well.

    You can check out the page here.
    http://www.ad-minister.net/tagcloud2/

    For some reason, the whole source code of that page has vanished…

    Comment by yoichi — March 19, 2008 @ 4:04 am

  7. Hi Yoichi. I personally have no experience in dealing with the japanese character set in Flash. However, even if the tag cloud doesn’t display your language I can not think of a reason why it should kill the entire page. Have you tried deselecting the “insert SWFObject…” setting in the options panel?

    Comment by Roy — March 19, 2008 @ 8:43 am

  8. Hi Roy,

    Thanks for your quick response and also sending over the new tagcloud.swf file.

    But unfortunately it is still not working. The insert SWFObject…” setting has been deselected since I do have another plugin using it.

    Strange…

    Comment by yoichi — March 19, 2008 @ 10:38 am

  9. […] Visit & Download […]

    Pingback by WordPress Plugins - SEO Friendly Images, FeedSnap, WP Cumulus at WordPress Themes, WordPress Plugins, Blog Tips, WordPress Optimizations >> WPthemesplugin.com — March 19, 2008 @ 11:43 am

  10. […] Visit & Download […]

    Pingback by Wp Wordpress » Blog Archive » WordPress Plugins - SEO Friendly Images, FeedSnap, WP Cumulus — March 19, 2008 @ 11:58 am

  11. @yoichi: Since the page breaks completely, there’s very little I can do to debug the situation…

    Comment by Roy — March 19, 2008 @ 4:43 pm

  12. “My theme/site appears not to like this plugin. It’s not displaying correctly.
    First thing you should try is to turn off the “Insert SWFObject include into header” option. This will probably render the plugin inoperable, but your blog should still work. If this fixes the issue then please try adding the SWFObject code manually into your blog’s header.php (just before the tag, and only if it’s not already there).”

    - Sorry but don’t work with Wordpress 2.3.3 and firefox naviguator.

    - It’s sure, because i have 0 plugins and original base theme.

    - When this plugins is active it destroy all the theme

    I’m very sad, because this plugins show great

    Comment by 3psyl0n — March 20, 2008 @ 6:19 am

  13. […] Tanck has created one of the coolest plugins for WordPress 2.3+ that I’ve seen. WP Cumulus creates a flash based revolving tag cloud that has to be seen to be appreciated. The plugin also […]

    Pingback by WP Cumulus - One Really Cool WordPress Plugin | wpmania.com — March 20, 2008 @ 7:50 pm

  14. Yes, same here. Breaks everything. And I’m working on a very, very simple site. I’m going to look into the source and try to fix it myself, but I thought I’d let you know.

    (In FF and Safari AND IE, on OSX with Parallels.)

    Comment by christopher — March 26, 2008 @ 5:09 pm

  15. It looks like it has something to do with your function

    wp_cumulus_createflashcode()

    Comment by christopher — March 26, 2008 @ 5:18 pm

  16. … regardless of whether or not the function has been initialized by calling your build-function within the site.

    Comment by christopher — March 26, 2008 @ 5:19 pm

  17. I’m working to resolve this issue. Unfortunately I do not have no way of recreating the error, so I’m working in the dark… Please hang in there for a little while. As soon as I get this figured out I will post a fix here.

    UPDATE: Version 1.02 aims to fix these problems.

    Comment by Roy — March 26, 2008 @ 8:14 pm

  18. Hi, I’m making a blog and I use wordpress, I try to add your aplication and i can’t do it, the plugin is active, and doesn’t matter if i make a page or a post, I can’t see it in my page. I tryed to add the code : in the theme, but this doesn’t works to, plase if anybody can help me, I’m lost.
    THANKS!!!

    Comment by german — March 27, 2008 @ 6:16 am

  19. Hi German. I can actually see the tag cloud on the “tags” page of your site, as well as underneath the main content. It is however white on a white background and very hard to spot. Also, you have only a single tag available. Try writing some content and adding a few more tags.

    I changed the default setting to non-transparent in version 1.02 to avoid this type of confusion.

    Comment by Roy — March 27, 2008 @ 9:43 am

  20. […] плагина WP Cumulus от Роя Тенка (Roy […]

    Pingback by Блог Волотко Дмитрия - Это нормально © :: Entries :: Облако тегов, с использованием флеша.WP Cumulus - плагин для WordPress. — March 28, 2008 @ 12:02 pm

  21. This is a gag …

    On v1.01 plugins crashed theme when i actived it
    On v1.02 plugins don’t crashed when i active it, but crash when i use it with [WP-CUMULUS] in a post

    I ve a clean install of wordpress whith no plugins, and the blue default theme of wordpress 2.3.3

    I never seen the beautiful 3D tags on my wordpress blog

    Comment by Alpha — March 28, 2008 @ 10:21 pm

  22. […] Et cela de manière trèèèèès facile grâce au plugin wordpress nommé WP-Cumulus. […]

    Pingback by Mettez vos tags dans un nuage en 3D | Homo Sapiens Internetus — April 3, 2008 @ 10:39 am

  23. […] un plugin. WP Cumulus qu’i’s’appelle. Vous uploadez le plugin (dans wp-content/plugins/WP-Cumulus) et […]

    Pingback by Berious » Vos tags dans un nuage 3D (WP) — April 3, 2008 @ 5:12 pm

  24. […] WordPress chez Roy Tanck’s. Thanks mate […]

    Pingback by WP Cumulus, WordPress plugin pour afficher un nuage de tags | Calyptratus — April 3, 2008 @ 9:00 pm

  25. […] le nuage de tags en 3D ! Découvert sur Homo Sapiens Internetus, ce plugin Wordpress, nommé WP Cumulus, vous permet de générer un nuage de tags en 3 dimensions. Voici ce que ça donne pour moi […]

    Pingback by De la 3D pour vos tags - Veille 2.0 — April 3, 2008 @ 9:29 pm

  26. This plugin (the implementation anyway) is now running within Movable Type. So for the bloggers on MT who want this to use WP-Cumulus, you can download the widget at: http://www.6000rpms.com/blog/2008/04/04/flash-tag-cloud-for-mt-4.html

    Thanks Roy. This is one of the coolest Tag Cloud implementations I’ve seen!

    Comment by Steve — April 4, 2008 @ 9:50 pm

  27. […] Wp-Cumulus est a mon avis un Plugin qui risque de faire beaucoup de bruit tellement c’est simple a utiliser avec un rendu assez agréable en fin de compte avec le moins d’efforts . […]

    Pingback by WordPress Plugin Cumulus: Nuage de Tags en Action | DzOrdre — April 4, 2008 @ 11:12 pm

  28. Hello,

    can you do the same plugin for categories??? It will be great.

    Thanks

    Comment by RZ1 — April 7, 2008 @ 10:07 pm

  29. @RZ1: That would be entirely possible. However, I feel this effect suits tag clouds better. I’ll keep this in mind for version 2 though…

    Comment by Roy — April 8, 2008 @ 8:01 am

  30. Hi again :)
    Some idea for future version of wp-cumulus :
    -sometimes, tags are staked, and it is dificult to see tags behind the other. Maybe improved random tags 3d distribution…
    -multicolors tags?
    -fastest travel to a tag in the back of “3d sphere”.

    Comment by RZ1 — April 9, 2008 @ 9:34 pm

  31. Hi

    Great plugin ! Even with the speed of tags being a bit too high :)

    Too bad i can’t make it work with my theme, WP-Premium (cf. demo here http://niss.gdc-hebergement.fr/WP/index.php?wptheme=WP_Premium_(niss) ). The header trick breaks the news slideshow (in flash too) and without modifying the header, i just see tags in text format (in my sidebar). I’m using WP 2.5 too.

    Any idea of a solution for this ?

    Comment by Stromb — April 12, 2008 @ 12:21 pm

  32. […] WP cumulus : Un magnifique tag cloud en flash. […]

    Pingback by Mon choix de plugins | Papilouve — April 12, 2008 @ 1:18 pm

  33. Hi Stromb. Have you tried manually adding in the SWFObject lines into your header? There appears to be a lot of javascript in that theme, so my guess is that SWFObject doesn’t play nice with one of the other scripts. You could try adding in the lines (see above) at different places inbetween <head> and </head> in your theme’s header.php.

    Comment by Roy — April 13, 2008 @ 11:46 am

  34. why my sidebar can’t dispaly well

    Comment by lokr — April 13, 2008 @ 3:40 pm

  35. […] Wp-Cumulus est a mon avis un Plugin qui risque de faire beaucoup de bruit tellement c’est simple a utiliser avec un rendu assez agréable en fin de compte avec le moins d’efforts . […]

    Pingback by WordPress Plugin Cumulus: Nuage de Tags en Action | ::: Dz*Ordre ::: — April 13, 2008 @ 5:34 pm

  36. hi. maybe make an option to choose a different font, or find a pretty one that supports unicode. this one doesn’t and is not funny when there is a letter missing inside a word

    Comment by picsel — April 14, 2008 @ 9:45 pm

  37. Hi Picsel. If your language isn’t listed under the “Some characters are not showing up” header above, drop me an email….

    Comment by Roy — April 15, 2008 @ 8:09 am

  38. Hi Rob

    I followed instructions on this page.

    When using first rule => cf. step 2 :
    Add the following code anywhere in your theme to display the cloud. This can be used to add WP Cumulus to your sidebar, although it may not actually be wide enough in many cases to keep the tags readable.

    It just displays the cloud tag in html

    So i used the solution in the FAQ => cf. My theme/site appears not to like this plugin. It’s not displaying correctly.
    and then it explodes my flash slideshow (each items of the slideshow appeared in html one after each other etc…)

    Sadly, even if i uderstand a bit code, i’m not a coder. Yes this Theme use a few script and i’m trying to see with his creator if he has a solution.

    If you can, a good thing would be to make of it a widget for sidebar use. But it’s perhaps more complicated than it seems…
    I’ll try to test again with my header to see if by chance it works. Anyway, that’s stil a great plug-in :)

    Comment by Stromb — April 15, 2008 @ 6:03 pm

  39. Sorry for long post, you may delete the last one.

    Ok, i found what was the problem … It was the CTC Plug-in … (Configurable tag cloud). Now it runs very well in the sidebar with just cumulus insert php code. And with the slideshow in parallel in the header.

    Now my only trouble with the cloud is it’s wider than higher, landscape style. But to insert it in a sidebar, it would be better if it was higher than wider, portrait style. My sidebar is already 320 pix wide, and i can’t expand it anymore.
    I’ve tried to put it under the slideshow for instance, and it’s not nice anymore as both flash object are too big (and my theme in this case feels broken…).
    If i change the size of the cloud, let’s say 320 * 640, tags are still like in a small landscape bubble, they don’t expand up and down if you see what i mean.

    After that, if you allow me a critic, of course the speed of the cloud, which prevent from having time to read tags unless you put your mouse on them. I mean it’s a cloud, not a storm ;) The way it moves, it also distract attention too much.

    Comment by Stromb — April 15, 2008 @ 6:36 pm

  40. Hi Stromb. Thanks for looking into this. I’ll try the CTC plugin and see if I can somehow get the two to play nice. The plugin feeds the output from WP’s standard tag cloud template tags to the flash movie, so if any plugin alters that output I can see how things would go haywire.

    As for the aspect ratio of the flash movie, I’m afraid that, considering how it’s a sphere and text is usually written horizontally, there’s actually very little I can do about it. One of my reasons for not including a widget is the fact that it doesn’t really work on a sidebar.

    I’ll see if I can incorporate a speed control in furure versions. I personally feel it’s just fine this way though. Setting it to lower speeds Could make navigating to the tags furthest away in the background sluggish.

    Comment by Roy — April 15, 2008 @ 7:42 pm

  41. Couldn’t you shape the sphere like an egg ? (in vertical position)

    Or perhaps simply making 2 spheres, like an 8, with tag from a to m in sphere 1 and tags from n to z in sphere 2 (ok, i’m not a coder … :) ) This way in a sidebar it’s easier to display the flash could vertically.

    I mostly use the CTC plugin to gave a larger size to tags, as i have many (60 and more coming) and this helps creating a distingo between some tags who would be too much of the same size.

    In my case, it’s mostly the theme i use and the idea i have of the overall aspect which “blocks” me. So all in all, it’s not really your plugin fault :)

    I could also reduce the size of the slideshow, so to put it in my 320 wide sidebar, and then putting the flagcloud (hmm, nice name …) at the place of the slidshow you may say … hmm, i’ll try to see what it does.

    As for the speed, yes, it still have to be a bit nervous. Perhaps it’s just me which is disturbed by the way it turns (when there’s no mouse over).

    Comment by Stromb — April 15, 2008 @ 9:03 pm

  42. […] Vai alla pagina di download Articoli correlatiI plugin che utilizzo su Worldpress.it […]

    Pingback by Worldpress.it | Dai vita al tuo blog: Cumulus Plugin| 4Stars Blog — April 20, 2008 @ 7:37 am

  43. Hi Roy - excellent work on this plugin, exactly what I was looking for! Thanks.

    I only wish that it could be customised a little further to slow down the rotation speed, or disable rotation completely until mouseover and then disable again on mouseout. It’s a little too distracting when its spinning wildly if you have it in the sidebar or alongside primary content.

    Also would love better support for more than the default 40 tags - I find if I increase the number to around 60 then they start to overlay pretty badly.

    Keep it up!

    Comment by coda — April 20, 2008 @ 2:39 pm

  44. Hi I am using this plugin and its really great. Just 2 things that are needed.
    1. I would like to alter the font
    2. I have lots of tags overlapping making it difficult to click on. Is there a way to stop this happening?

    Thanks

    Comment by David — April 21, 2008 @ 2:18 pm

  45. I also have a third suggestion for future versions. Can you make it so that when you mouse over an item it stops moving. That way you can get to all the tags even if they are overlapping and you don’t have to play catch when it moves away from your mouse.

    Just an idea! ;-)

    Comment by David — April 21, 2008 @ 2:24 pm

  46. […] WP Cumulus allows you to place an interactive, flash-based tag cloud on any page you choose. […]

    Pingback by Cory Bohon » Tag cloudiness — April 25, 2008 @ 4:03 pm

  47. thanks for a great plugin!

    one suggestion: could you add an option to limit the number of tags?

    I’d like to set the cloud to only show the 10 most used tags, or something similar like that.

    Also, because tags in the cloud often overlap, it would be great if you point on a tag with your mouse, it not only stops spinning, but zooms in on the tag to make it legible.

    thanks!

    Comment by erik stronks — April 27, 2008 @ 2:34 pm

  48. […] fingerspidser: WP Cumulus - pluginet puster liv i din tag cloud med (oh gys) flash… Nu er flash og SEO at sammenligne […]

    Pingback by Flash Tag Cloud : Digital Frontier — April 28, 2008 @ 10:05 am

  49. […] Flash Tag Cloud Widget « Contact Us –  […]

    Pingback by » Flash Tag Cloud — May 1, 2008 @ 11:26 am

  50. […] If you like, go the link http://www.roytanck.com/2008/03/15/wp-cumulus-released/. […]

    Pingback by Flash Tag Cloud — May 2, 2008 @ 11:37 pm

  51. […] interactive flash plugin - WP-Cumulus by Roy Tanck - displays a three-dimensional infographic sphere composed of your tags. Very […]

    Pingback by WordPress Plugin: Cumulus - 3D Globe Tag Cloud » Eli Foner — May 3, 2008 @ 11:39 pm

  52. […] Tag Cloud (hoping to switch to Cumulus when it’s more […]

    Pingback by More notes on v6 - blog - coda.coza — May 6, 2008 @ 2:24 am

  53. Great Job. I got it running in minutes and think it looks just perfect. My suggestions to it: I have no idea about flash programming but I would prefer if the tag would could slow down a bit. Also I would like to build a page where the cloud fills the whole page but keep my small column version, too. // Anyway. Thanks a lot again. It looks very very nice.

    Comment by Andreas — May 7, 2008 @ 3:36 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress | Design by Roy Tanck