WordPress Plugin: Wavatars

By Shamus
on Dec 17, 2007
Filed under:
Projects

wavatars.jpg

Overview:

Wavatars is a plugin that will generate and assign icons to the visitors leaving comments at your site. The icons are based on email, so a given visitor will get the same icon each time they comment. It livens up comment threads and gives people memorable “faces” to aid in following conversation threads. It’s also fun.

Features:

  1. Wavatars can generate 956,384 different shapes in 57,600 different color combinations for a total of 55,087,718,400 (55 billion) unique Wavatars. Yeah, you should have plenty. You’ll run out of human beings (or hard drive space) long before you run out of Wavatars.
  2. The icons are generated on-the-fly. You can adjust the desired size of the icons.
  3. For easy deployment, icons will automatically preceed the commenter’s name. You can set HTML to come directly before and after the icon (to put it inside of a <DIV> tag, for example) or you can control the placement of the icons manually if you don’t mind adding a single line of PHP to your theme.
  4. Wavatars are based entirely on email and are thus very portable. The same email will result in the same Wavatar, even on different sites, so users will have the same icon on all Wavatar-enabled sites. (Assuming, or course, that there are other Wavatar-enabled sites. I don’t know if anyone will want this plugin or not.)
  5. This plugin also supports Gravatars. If you like, it can show the Gravatar for a given user (if available) and fall back on their Wavatar only if they don’t have a Gravatar set up. This means users can choose to set up a unique icon for themselves, and if they don’t, they will be assigned a unique Wavatar. This is a great system that lets people personalize if they want, yet still provide a decent icon for the lazy or apathetic.

Installation

  1. Download the plugin.
  2. Copy it onto your website in the wordpress /plugins folder. Then enable the plugin. That’s it. Wavatars will instantly appear for all posts (even old ones) on your blog. If you don’t like how the image looks within your theme, read on…

The administration panel is under Options » Wavatars. You can adjust the size of the Wavatars, and assign HTML to come before and after each image to help nudge it into place. Each image is also set with the CSS “wavatars” class. On this site, I don’t have any HTML prefix or suffix, and instead just added these lines to my CSS:


.wavatar {
float: left;
padding: 3px;
background: #fff;
margin-top: -25px;
margin-left: -25px;
margin-right: 5px;
}

If that still doesn’t give you enough control over wavatar placement and you don’t mind editing your theme, just turn off automatic placement and add the line wavatar_show($comment_author_email); to your comment loop wherever you want the image to appear.

Your mileagle may vary. It all depends on your installed theme.

Note that the plugin requires that your install of PHP support the GD library. If it doesn’t, the Wavatars won’t show up and you’ll get a warning in the Wavatar admin panel. You can still use this plugin to display Gravatars, even if the GD library isn’t available.

This is the first release. You could even go so far as to call it “beta” if you want to be formal about it. It’s only been tested on one server (this one) so far. Please leave bug reports and questions in the comments below.

Download Wavatars v1.0.0

Enjoyed this post? Please share!


FIVE HUNDRED!20520. There are now n+1 comments, where n is a ridiculous number.

From the Archives:

1 2 3 4 5 8

  1. Shamus says:

    I don’t know how Blogger works, so I can’t really say. I would certainly need some editing, assuming it’s even possible.

  2. Rob says:

    Interesting idea I just came up with at random. Approach the people who do Gravatars, possibly joining up with monsterID or whatever first, and talk to them as possibly setting up one of the two as the fallback for a gravatar. So if you have a gravatar acount set up, but no gravatar, it will default to a wavatar or monsterID.

  3. Frank Lucas says:

    WordPress: v2.3.1
    MySQL: v5.0.45-community-nt
    PHP: v4.4.7
    Server: Microsoft-IIS/6.0

    Reported:

    Warning: opendir(../wp-content/cache/wavatars) [function.opendir]: failed to open dir: Invalid argument in D:\Domains\sunrisedancer.com\www\weathervane\wp-content\plugins\wavatars\wavatars.php on line 156

    where cache clearing button should be.

    Regards.

  4. Frank Lucas says:

    Is there an easy way to reduce the wavatar’s size?

  5. Shamus says:

    You can resize the wavatars in the admin panel.

    As for the error, I’m not sure why you’re getting that. I’ll have to experiment on my setup and see if I can get the error to appear. Thans for the heads up.

  6. Tobeon says:

    Really love your idea ^_^ however I had to do a little editing (very little) so it would work on my site, I had to add this line

    chmod($filename, 0644);

    at line 333 (in the wavatar_build function) as by default my server creates files with a chmod permissions value.. thing of 600, so the image wouldn’t be viewable

  7. Chad says:

    Just checking mine.

  8. Merci says:

    Very nice! Thank you for sharing this.

    Happy New Year!

  9. rev says:

    I can’t seem to get it to work on my wordpress blog. at first, it complained that it couldn’t write to the wp-content/cache/wavatar folder, so i created the folder manually. it stopped complaining about the folder, but the wavatar cache is always empty. it’s like it doesn’t have permission to create the images. i’m about to give up.

  10. Asmor says:

    Hey, great plugin! One of the reasons I didn’t want to enable gravatars was because I expect many of my visitors not to have them, and didn’t want some people to have pics and some not to.

    One issue, though. When you fetch the gravatars, you’re asking for size 60, and then by default you set their display size to size 80, meaning you’re causing unnecessary upscaling and a consummate degradation in quality.

  11. Doug Smith says:

    Implemented at my site. Terrific idea. One of the most creative in Internet history! Love it. Great work.

  12. M says:

    Odd…it seems to not want to display a gravatar for me.

  13. Miral says:

    Some bugs (or stuff that seems buggy, at least; a couple have been mentioned before but they’re still broken in the latest version):

    1. The installation instructions don’t mention that you need to create wp-content/cache/wavatars and set it to world-writable. (Yes, I know you’ve got a mkdir in there. But that will only work if wp-content is already world-writable, which nobody should do since it’s just begging to be hacked. Or if you already have a cache folder, which isn’t standard issue.)

    2. The code contains “function_exists (imagecreatetruecolor)”, and that parameter ought to have quotes around it.

    3. You’re doing the strtolower on the email no less than three times (twice in wavatar_show and once in wavatar_get); all but the last is redundant.

    4. wavatar_show uses $border without actually assigning anything to it. And the border attribute isn’t valid XHTML anyway, so it probably shouldn’t be putting it in at all.

    5. wavatar_comment_author is expected to return the XHTML it wants to output, but you’re echoing it instead. (Also, you probably should put this filter on ‘get_comment_author_link’ instead, since ‘get_comment_author’ is more fundamental and used in other places (like the feeds).

    6. The URL encoding for the gravatar link is completely wrong.

    7. It chokes when the physical location of the files doesn’t match the URL.

    8. wavatar_show isn’t closing the <img> tag (with a /> trailer), nor is it including alt text; both of which are required in XHTML.

    Here’s a replacement version of wavatar_get that fixes #6 and #7 (and part of #2) — here’s hoping it doesn’t get too mangled:

    function wavatar_get ($email, $size='')
    {
    $email = strtolower ($email);
    $email_blank = get_option ('wavatar_email_blank');
    if ($email == '') {
    if (get_option ('wavatar_email_blank') == 'omit')
    return '';
    if (get_option ('wavatar_email_blank') == 'blank') {
    wavatar_build_blank ();
    return WAVATAR_BLANK;
    }
    }
    $md5 = md5($email);
    $seed = substr ($md5, 0, 17);
    $rating = get_option ('wavatar_rating');
    if ($size == '')
    $size = get_option ("wavatar_size");
    if ($size == 0)
    $size = AVATAR_SIZE;
    //make sure the image functions are available before trying to make wavatars
    if (function_exists ('imagecreatetruecolor')) {
    //make sure the cache directory is available
    $dir = "wp-content/cache/wavatars";
    $localdir = ABSPATH . $dir;
    if (!file_exists ($localdir) && !wp_mkdir_p ($localdir))
    return;
    $dest = $localdir . "/$seed.png";
    $url = get_bloginfo ('wpurl') . "/$dir/$seed.png";
    if (!file_exists ($dest))
    wavatar_build ($seed, $dest, $size);
    } else //image functions not available
    $url == '';
    if (get_option ('wavatar_gravatars'))
    $url = "http://www.gravatar.com/avatar.php"
    . "?gravatar_id=$md5&amp;rating=$rating"
    . "&amp;size=$size"
    . "&amp;default=" . urlencode($url);
    return $url;
    }

  14. XIII says:

    Brilliant idea, can’t wait to install it on my blog and I hope to see more soon. :)

  15. bushtool says:

    Shamus, you helped me out above but now I have a similar issue from adding the brian’s threaded comments plugin to my site. When I add the wavatar code manually to the new comments.php file, I get the default (the same graphic) wavatar for every comment. When I turn it on through the options setting, it works fine for each comment but the default (the same graphic) wavatar shows up next to every comment listing in my “recent comments” widget on the sidebar.

    Any ideas on how to fix this? I tried using both versions of this the (wavatar_show($comment_author_email); code.

    Thanks,

  16. bushtool says:

    Addendum to comment above this one: I resolved the above issue by installing a new plugin that lists recent comments. It doesn’t show default wavatar like the recent comments widget. It is called “Whats New Whats Fresh Whats Happening…”. Seems to work good although I’d prefer going back to the recent comments widget because it doesn’t clutter up the sidebar with the dates.

    I love the wavatars!

  17. impropio says:

    Bonito Plugins!

  18. Michel says:

    testing picture in comments

  19. rev says:

    per my comment above, i just figured out that the plugin doesn’t play nice when your wordpress is setup in a sub-folder, i.e. your main page is in the root but all the wordpress files are not. the plugin created a /wp-content/cache/wavatars/ folder in the root but wordpress is looking for the images in /wordpress/wp-content/cache/wavatars/.

    any ideas?

    p.s. your captcha never changes.

  20. rev says:

    FYI I was able to fix my issues per comment #142 (Miral) above. Thanks!

  21. BG! says:

    Great plugin! It worked “straight out of the box” for me. Many thanks.

  22. Jessica says:

    This is a wonderful plugin. Unfortunately it doesn’t function on my blog. I wish it does. The wavatars that show up on my blog (for the commenters who don’t have gravatar) is simply a colored background, but no designs or faces on it. Can you advice me with any ideas or help on how to rectify this? Thank you.

  23. Oli says:

    Just checkin’

    Cheers.

    EDIT: Hahaha, mine is so awesome! Thanks!

  24. […] Ravatar plugin is based on Shamus Young’s Wavatar plugin which is quite good, but the generated avatars weren’t really what I was looking […]

  25. Finalfork says:

    o_o…. i must know

  26. […] finally got around to installing Shamus Young’s Wavatar plugin and getting it to look nice in the comments. The Wavatars are based on your email address you use […]

  27. […] Wavatars My own plugin for making all those funny little faces you see in the comments. […]

  28. […] it’s finally happened. Shamus Young (of DM of the Rings and Wavatars notoriety) has started making the most absurd ranting claims and threats I’ve ever seen: I am […]

  29. mapleleaf says:

    checking…

  30. spaceman says:

    here we go

  31. […] already added system is gravatar site (gravatar.com), mybloglog.com, avatars.pl, and livejournal.com. I integrating Go Avatar with wavatar plugin by shamus young […]

  32. Chris says:

    Shamus,
    Love the Wavatar plugin, but somethings seems amiss. All of my monster avatars have been replaced with the generic Gravitar blue “G” avatar. It seems that you have the same happening on your site…or am I just seeing things.

  33. Chris says:

    I’m now thoroughly confused…my site has now fixed it’s self…yours also. Just don’t get what happened.

  34. admin says:

    After working fine for a couple months, my site today just started showing a generic gravatar for all commenters without a gravatar rather than the wavatar. What is going on?

  35. admin says:

    Re, my message above. Whatever goblins are around went away so now I’m back to wavatars again. Must be something gravatar.com is doing.

  36. wolkanca says:

    nice plugin. test comment.

  37. admin says:

    Shamus,

    looks like the generic gravatars are mucking up the wavatars

  38. funkcoaster says:

    It appears something changed with the default icon from Gravatar and it’s making the Wavatars not work (unless you disable Gravatars, which is a BIG feature of this).

    Dude… your stuff is VERY VERY cool. Hopefully, you’ll figure this out…

    Thanks for the great plugin (even though it’s kinda broke right now)!

  39. ShadoStahker says:

    Gravatars recoded their stuff recently, which is what is causing the issues you’re seeing.

    The fix is easy.

    In function wavatar_get, change:

    $url = “http://www.gravatar.com/avatar.php?gravatar_id=$md5&;rating=$rating&;size=$size&;default=$url”;

    to

    $url = “http://www.gravatar.com/avatar.php?gravatar_id=$md5&rating=$rating&size=$size&default=$url”;

    Yeah, that’s right, the problem was three semicolons.

    See http://blog.gravatar.com/2008/03/14/big-changes-afoot/
    for details on syntax.

  40. admin says:

    thanks ShadoStahker:, that fixed the generic gravatar issue on my site

  41. Chris says:

    Thanks for the assist ShadoStahker. I’ve been a little disappointed about the recent issues and was considering leaving the Wavatar plugin for something else. Thanks again!

    Now the creator of the plugin needs to apply the fix to his own site. ;-)

  42. rev says:

    hmm. my wavatars weren’t broken, but making shadostakhker’s mod actually *caused* the broken gravatar behavior. putting the semi-colons back in made it work again. is this fix really necessary?

  43. Feylamia says:

    So right now there’s no way to use wavatars and have valid code? Bummer… :-/

  44. Miral says:

    ShadoStahker’s code isn’t correct either, as I’ve said before. Use this line instead (I’ve split it up a bit so it displays better; this should all be on one line):

    $url = "http://www.gravatar.com/avatar.php?gravatar_id=
    $md5&amp;rating=$rating&amp;size=$size&amp;default="
    . urlencode($url);

    I’ve sent a full patch (including some additional fixes beyond this) to Shamus.

  45. rev says:

    thanks miral. apparently i applied your patch earlier, which explains why my wavatars weren’t broken.

  46. Thanks for offering this :)

  47. […] updated Shamus Young’s Wavatars plugin to the newest version to fix a bug which had cropped up where wavatars weren’t being […]

  48. Carlo Veltri says:

    This plugin is not compatible with freshy2 theme… why?
    Please help me

  49. Weird… I used to have easygravatars and then got wavatars… and when I deleted easygravatars (it was already deactivated), my wavatars started acting all funky. Hmm…

  50. […] Wavatars builds up cartoony faces using geometric shapes. Interestingly, it’s by Shamus Young, author of the screencap-based webcomic DM of the Rings and writer of Chainmail Bikini. […]

  51. […] Wavatars – an awesome plugin that creates a unique avatar for each commenter, or uses their gravatar if they have one. Update: 2008-01-05Version 2.0 also includes the Blueprint print stylesheet and some extra jiggerypokery thanks to Footnote Links created by Aaron Gustafson. Update: 2008-01-09Version 2.1 finally fixes the issues with the left margin caption/cite/metadata positioning. Now if the post markup is correct the page will render perfectly on every browser I’ve tested. Update: 2008-04-13Version 2.6 Introduces: […]

  52. […] for inspiration we found these three exceptional projects: WP_Identicon, WP-MonsterID, and the Wavatars plugin. We decided to take the truly inspiring work that these projects have done, and internalized those […]

  53. Pange says:

    This is such a fun idea! (But oh my goodness, my wavatar is frightening, lol.)

  54. […] across this article, which talks about gravatar’s new support for Identicons, MonsterID, and Wavatars. In a nut shell what these projects try to do is uniquely identify users, using information like IP […]

  55. […] across this article, which talks about gravatar’s new support for Identicons, MonsterID, and Wavatars. In a nut shell what these projects try to do is uniquely identify users, using information like IP […]

  56. Les says:

    Mmmmm, nice. I like the style of the images, and it’s working for me.

  57. Ryan says:

    Wow, this is awesome! Keep up the good work :)

    I’ve added an extra ‘z’ to my email address so that I can see it in action (otherwise my Gravatar would show up).

  58. […] que já procuravam aderir à idéia dos Identicons: Os projetos WP_Identicon, WP-MonsterID e Wavatars foram automaticamente mesclados ao Gravatar original, o que facilita a inclusão de qualquer um […]

  59. Kaessa says:

    THANK YOU for these lovely Wavatars. I just put them on my site. I was looking for an alternate default gravatar, but these are much more fun.

    Great work!

  60. turtlegirl76 says:

    Neat application. I’m considering installing something like this on my site. I like that it generate them for the person. Helps out those that are a bit web-challenged.

1 2 3 4 5 8

12 Trackbacks

  1. By Ravatar wordpress plugin | GrokCode on February 22, 2008 at 2:04 pm

    […] Ravatar plugin is based on Shamus Young’s Wavatar plugin which is quite good, but the generated avatars weren’t really what I was looking […]

  2. […] finally got around to installing Shamus Young’s Wavatar plugin and getting it to look nice in the comments. The Wavatars are based on your email address you use […]

  3. By Twenty Sided » Blog Archive » Plugins Used on February 25, 2008 at 12:01 pm

    […] Wavatars My own plugin for making all those funny little faces you see in the comments. […]

  4. […] it’s finally happened. Shamus Young (of DM of the Rings and Wavatars notoriety) has started making the most absurd ranting claims and threats I’ve ever seen: I am […]

  5. […] already added system is gravatar site (gravatar.com), mybloglog.com, avatars.pl, and livejournal.com. I integrating Go Avatar with wavatar plugin by shamus young […]

  6. […] updated Shamus Young’s Wavatars plugin to the newest version to fix a bug which had cropped up where wavatars weren’t being […]

  7. By Avatars! | K-Squared Ramblings on April 16, 2008 at 11:02 pm

    […] Wavatars builds up cartoony faces using geometric shapes. Interestingly, it’s by Shamus Young, author of the screencap-based webcomic DM of the Rings and writer of Chainmail Bikini. […]

  8. By Claim Theme » nunnone.com on April 20, 2008 at 10:43 pm

    […] Wavatars – an awesome plugin that creates a unique avatar for each commenter, or uses their gravatar if they have one. Update: 2008-01-05Version 2.0 also includes the Blueprint print stylesheet and some extra jiggerypokery thanks to Footnote Links created by Aaron Gustafson. Update: 2008-01-09Version 2.1 finally fixes the issues with the left margin caption/cite/metadata positioning. Now if the post markup is correct the page will render perfectly on every browser I’ve tested. Update: 2008-04-13Version 2.6 Introduces: […]

  9. […] for inspiration we found these three exceptional projects: WP_Identicon, WP-MonsterID, and the Wavatars plugin. We decided to take the truly inspiring work that these projects have done, and internalized those […]

  10. […] across this article, which talks about gravatar’s new support for Identicons, MonsterID, and Wavatars. In a nut shell what these projects try to do is uniquely identify users, using information like IP […]

  11. […] across this article, which talks about gravatar’s new support for Identicons, MonsterID, and Wavatars. In a nut shell what these projects try to do is uniquely identify users, using information like IP […]

  12. […] que já procuravam aderir à idéia dos Identicons: Os projetos WP_Identicon, WP-MonsterID e Wavatars foram automaticamente mesclados ao Gravatar original, o que facilita a inclusão de qualquer um […]