The top 5 WP-Cumulus hacks

Every once in a while a user asks me how to change something in WP-Cumulus that fits his or her specific needs. If enough people ask for the same thing (*), it’ll probably be in the next release, but sometimes the modification is so specific to a certain website or project that it makes sense to simply hack it in. Here are the five most common of those, in no particular order.

1. From a sphere to an ellipse

I love spheres. More than I love ellipses. But that’s personal preference. If you really need to have an elliptical tag cloud, here’s how to go about it.

  1. Download the development version and open the project in Flash (CS2 or better).
  2. Open the Tagcloud.as file,and look for this line: mcList[j].x = rx3 * per;.
  3. Change to: mcList[j].x = 5 * rx3 * per;.
  4. Publish the movie, and use the resulting swf to overwrite the original one.

This should make the cloud five times wider. You can of course edit the number to suit your needs or do something similar to the y coord. Please note that the movie was designed to fit the round cloud into the available space. Making it five times wider when the width is the limiting dimension will make the tag go way off the screen. You’ll need to adjust the aspect at which you embed the movie to match your modification.

2. Opening links in a new window or tab

As far as the W3C is concerned, target=”_blank” is on the way out, and within WordPress it makes sense to use the same window. If you however need your links to open in a new window, or a specific frame, this is quite easy to do.

  1. Download the development version and open the project in Flash (CS2 or better).
  2. In Tag.as, look for _self
  3. Change to _parent or the name of the frame you want to use.
  4. Publish the movie, and use the resulting swf to overwrite the original one.

EDIT: As of version 1.21, the movie supports the ‘target’ attribute

3. Passing parameters to wp_list_categories

WP-Cumulus was designed with tags in mind, but it made sense to add categories. This was a little tricky, and I needed to pass a few characters to the template tag that lists the categories. This meant I couldn’t open up the parameters to the users like I did with the parameters for the wp_tag_cloud. But if you really need to exclude a category or limit the number of tags, you can add paramaters to ‘mine’.

  1. You’ll need to edit ‘wp-cumulus.php’, so you won’t need Flash.
  2. Find the line that calls wp_list_categories.
  3. Be sure to leave the parameters that I put in there, but feel free to add yours.
  4. Save the file and overwrite it on the server.

4. Filtering out accents

By default, WP-Cumulus supports the Latin character set only. This is due to a limitation in the way Flash handles text, and I won’t be able to really fix this until Flash Player 10 becomes mainstream enough. I’ve written a post on how to add your lanuage’s characters, but another option might be to filter out accents. This apparently helps languages like Polish. PHP has a function that does this, and it’s quite easy to add into the plugin.

  1. You’ll need to edit ‘wp-cumulus.php’, so you won’t need Flash.
  2. Find this line: $tagcloud = urlencode( str_replace( " ", " ", ob_get_clean() ) );.
  3. Change to: $tagcloud = urlencode( remove_accents( str_replace( " ", " ", ob_get_clean() ) ) );
  4. Save the file and overwrite it on the server.

(I’m currently considering adding this to the next version, but this hack is needed for all versions up to and including 1.20)

5. Unhiding the regular tag cloud

Because the plugin uses Flash, I needed to provide some alternate content to users who do not have the plugin, and to search engines. The first few versions simply outputted the same tag cloud as regular HTML, but this caused a few problems. Because SWFObject replaces the alternate content after the page has been fully downloaded and displayed, the page would ‘twitch’. That’s why I opted to hide the tag cloud through CSS as an intermediate solution.

If SEO is really important to you, and you feel the tag cloud plays a vital part, you should probably remove the CSS that hides it.

  1. You’ll need to edit ‘wp-cumulus.php’, so you won’t need Flash.
  2. Find this bit: <p style="display:none;">.
  3. Change to: <p>.
  4. Save the file and overwrite it on the server.

EDIT: As of version 1.21 this is an option under ‘Settings – WP Cumulus’.

* = This is in now way an invitation to email bomb me with feature requests.

36 Comments

  1. Opening links in a new window or tab!
    I don’t have access to a flash editor that would do this (far too expensive)… I was wondering if you could include a version that open tags in a new window and add it to the source… If you get time that is… and thanks again for sharing.. magic…
    Mike

    Comment by Mike (Michaelo) — March 24, 2009 @ 9:31 am

    • @Mike: This is another feature that would only benefit those who use it outside of WP. I’m hesitant to include such features as it would bloat the swf file (I want to keep one central version that does everything, not several branches). I’ll see if this can easily be accomplished though. It has been requested quite often.

      Comment by Roy — March 24, 2009 @ 3:20 pm

  2. Hi Roy,
    I have already installed the tag cloud and its been working perfectly. I have it installed for just the tags. I was wondering if it is possible to add another tag cloud just for the categories? I would like to have two separate tag clouds!

    Thanks!

    Comment by Mitch — March 27, 2009 @ 12:12 am

    • Hi Mitch. You should be able to do that with shortcodes. Since version 1.20 you can put as many tag cloud into pages and posts as you like.

      Comment by Roy — March 27, 2009 @ 9:11 am

  3. Hey Roy, I’ve spent days trying to get your tagcloud in my flash website. The issue is that the swf is import protected. So I got the DEV files, however right off the bat I don’t get anything when I publish the SWF from FLA. I almost gave up, but I figured I’d try and ask. BTW, mad props for developing this concept. Nice programming too!

    thanx,
    joey ;0)

    Comment by Joey — March 27, 2009 @ 9:06 am

  4. Hey Roy,

    I’ve been using your plugin for a while now and just wanted to let you know I love it!

    Keep up the good work!

    Comment by Tommy Day — March 31, 2009 @ 5:30 pm

  5. First: Thanks for the great plugin!
    Second: One big issue: I seem to get an error in IE7, i have used your plugin in combination with Joomla 1.5 and virtuemart 1.1. IE 7 crashes trying to opening the site when the plugin is enabled. The issue stops when I disable your plugin so it seems to be a coding issue. I can play other swf files so it’s not flash itself.

    Anny suggestions?

    Comment by Marc — April 1, 2009 @ 11:23 am

    • @Marc: With the amount of markup errors in your page, you should try enabling the compatibility mode. Although it does seem to work in my IE7 without issues now.

      Comment by Roy — April 1, 2009 @ 3:48 pm

  6. Hey Roy,

    Thanks for the great tagcloud plugin. But I am wondering. It looks like the tagcloud is not showing all the tags there are in my blog. It looks like it is showing the same tags every time. Some tags I never see in the cloud. Is this possible or am I just looking at the wrong moments?

    Luc

    Comment by Luc — April 2, 2009 @ 9:14 am

  7. Hi Roy,
    I love the graphic, I am picking the code apart as an exercise in learning flash and wordpress and have been stuck for a couple of days trying to figure out why when I “Debug Movie” in cs4 no tags show up.

    I have confirmed via the debugger that the tags are in there, having been populated via tagcoud.xml. but the bugger just sit’s there with a white screen

    I have tried changing the color of the tags, but that didn’t appear to help.

    What is the mousetrap_mc for?

    And hey, would you be interested in a hack for hire job? (not tagcloud)

    It wouldnt be as interesting as nuclear fusion, but lot’s easier (for a smart guy like you)

    Rob

    Comment by Rob — April 2, 2009 @ 9:08 pm

    • Hi Rob. That’s always the trickiest situation, when nothing shows up. Are you on a Mac? In that case you should make sure the font in the textfield is the same (exact same name) as the one specified in Tag.as. Another thing to try is to make both non-bold.

      The mousetrap mc is used to detect mouse events in case the movie is set to wmode transparent. Otherwise the mouse would only be detected when it’s over a tag not when inbetween tags or in the corners.

      And yeah, feel free to contact me about freelance work.

      Comment by Roy — April 2, 2009 @ 9:17 pm

  8. Thanks Roy, is there someplace private we can “talk”?

    Comment by Rob — April 4, 2009 @ 5:01 am

  9. Hey neat! Could you please provide instructions for compiling with flex sdk or some other free tool?
    Please?

    If I comment out the two mousetrap_mc lines, it compiles, but then it crashes at runtime with the following error:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.roytanck.wpcumulus::TagCloud()
    at tagcloud/_tagcloud_TagCloud1_i()
    at tagcloud()
    at _tagcloud_mx_managers_SystemManager/create()
    at mx.managers::SystemManager/initializeTopLevelWindow()
    at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()
    at mx.managers::SystemManager/docFrameListener()

    Comment by A. L. Taurog — April 19, 2009 @ 8:55 pm

  10. Hi Roy,

    I posted this question on the wp.org forum also.

    I have WP-Cumulus 1.20 installed on my new 2.7.1 WP. I also installed tags-cloud-flash-widget that allows WP-Cumulus to be in the right sidebar rather than in a post or page. It appears to be working correctly because there are two tags floating around “Comments” and “Features” (see My site).

    Question: Is there a way to have the floating tags be words (hyperlinks) which when clicked take one to pages in one of our other domains?

    I’m using Mehmet’s WP-Showcase theme.

    Thanks

    Kerry

    Comment by Kerry — April 25, 2009 @ 2:56 am

    • @Kerry: WP-Cumulus uses WordPress’ built in tag functionality. It parses the output from a built in function that returns the tags, link targets included. There’s no way for me to alter the links, or at least not one that would be user friendly.

      Comment by Roy — April 25, 2009 @ 7:37 am

  11. I have WP-Cumulus 1.20 installed on my new 2.7.1 WP. I also installed tags-cloud-flash-widget that allows WP-Cumulus to be in the right sidebar rather than in a post or page. It appears to be working correctly because there are two tags floating around “Comments” and “Features.” (see my site http://www.managercoaching.com/wp.

    Question: Is there a way to have the floating tags be words (hyperlinks) which when clicked take one to pages in one of our other domains?

    I’m using Mehmet’s WP-Showcase theme.

    Thanks

    Kerry

    Comment by Kerry — April 25, 2009 @ 10:05 am

  12. Oops, copy-posted the previous post.

    Is it possible to add the contents of a HTML web page with dozen hyperlinked words on it into a WP post or page and fool clouds into displaying them as floating tags? Desperate here :)

    Thanks Kerry

    Comment by Kerry — April 25, 2009 @ 10:12 am

    • @Kerry; If you create a page with links on it, and assign it a whole bunch of tags that might work. Especially if you’re not using tags for other pages and posts. It’s probably best ot use a post though, and not use the ‘more’ divider so all of it shows up on the tag result page.

      Comment by Roy — April 25, 2009 @ 12:06 pm

  13. Nice!

    I was going to leave on comment on your site about how I’d like to display a regular tag cloud when Flash isn’t present, like on my iPhone. Now I’ve gotten that taken care of, love your work.

    Comment by Michael — April 30, 2009 @ 10:29 am

  14. @Roy: Hello, Roy! Interesting fact – in IE the program does not work for me. But works in Opera and Firefox. What can reason be in?!

    Comment by GeorgX — May 20, 2009 @ 4:34 am

    • @GeorgX: In 99% of cases that is caused by markup errors in the page. You can use validator.w3.org to iron those out, or try the ‘compatibility mode’ (settings->wp cumulus).

      Comment by Roy — May 20, 2009 @ 8:44 am

  15. Hi Roy!

    I’ve been working with the xml version. It works fine with words, but I’d like to substitute my own images, not from flickr.

    Can you possibly give me an xml line that I could use, that would link to an image on my site. (just trying to figure out the xml code).

    TY. I hope this is clear (somewhat clear?).

    David

    Comment by David DelMonte — May 30, 2009 @ 8:54 pm

  16. Ooops, found your photowidget.

    I would like to use the code in an existing page. Can I just take the div (in example,html) and use that (pointing to the relevant files), or do I need to use an explicit XML page as in your example.html file.

    TY – really!!

    David

    Comment by David DelMonte — May 31, 2009 @ 6:15 pm

  17. double oops. figured it out. In RapidWeaver, the widget does not show in preview mode. It does work fine when published.

    Thanks Roy. I’ve already made a donation. When I have some cash, I’ll make another. Brilliant work.

    David

    Comment by David DelMonte — May 31, 2009 @ 8:07 pm

  18. Hello,
    I am using WP Cumulus in my own web site (no WP) and among the usual links, I wanted to insert some mailto links. When the user clicks on the e-mail adress, it opens the e-mail client with the adress..
    AT this stage I just inserted the basic mailto string :
    INFO@blabla.com

    This does not work. I suspect the “:” is causing trouble, but I don’t know how to get around it. Please advise.

    Thanks in advance

    Comment by Jay — September 30, 2009 @ 8:37 am

  19. oups the string is the usual mailto string:

    a href=”mailto:info@blabla.com hicolor=”0x660670″ color=”0x660670″ style=”font-size:8″ …

    Comment by Jay — September 30, 2009 @ 8:39 am

  20. Link: The VISUALIZERS blo go go » Technik-Feature – WP-Cumulus
  21. Roy,

    I love the solution of creating an elliptical cloud in the swf file. I’ve downloaded the Dev but upon import to Flash I’m disallowed as it is a ‘protected file’…

    You know a way around this?

    Comment by Mitch — October 15, 2009 @ 11:06 pm

  22. Please ignore my previous post. Evidently I downloaded something other than the dev version.

    Comment by Mitch — October 15, 2009 @ 11:14 pm

  23. very nice, iam glad you do your work such as the cloud. and of cause sharing it, its so simple to use in my website… :) intuitive. |<ione

    Comment by kione — November 20, 2009 @ 12:21 am

  24. Hello, this plugin is very nice.
    But a want hide hover tag border, how to hide hover tags border?

    Comment by Adam — December 29, 2009 @ 5:01 pm

  25. There is a bug in the depthSorting function – if you use only ( for example ) 3 tags there will be a layer problem with the tags objects.

    the one which is farest away will overlap the one in front.

    ( sorry for the bad english :D ).

    Greetings

    Comment by Mike — January 11, 2010 @ 3:44 pm

  26. Link: [HOT] WP-Cumulus bản hỗ trợ tiếng Việt | Hutek.info
  27. Link: 五个十分有用的WP-Cumulus hacks « 大尾巴狼的自留地
  28. Link: wordpress插件推荐 -wp-cumulus实现漂亮的3D标签云 | 翼虎博客
  29. Link: WordPress 3D云标签插件:WP-Cumulus | 人在旅途