On: 2005/04/23
Shorter URL for this page: http://ozh.in/ld

Talking about other bloggers, or about your commenters ? Show what they (virtually) look like !

This WordPress Plugin allows you to personalize, if not humanize, your posts, adding popups containings avatars next to mailto links, as well as next to any word. You can chose avatar images, or let Gravatar chose it, since this plugin fully supports this avatar wonderful database (don't have one ? Go sign-up !)

An additionnal — and interesting on its own — feature is that all email addresses are encrypted, using a WordPress built-in function, to protect them from being harvested by spambots.

Current version: 1.1

Huh ? Show me.

A small warning before we go on : this doesn't work in MSIE. Another thing to make it clear : this is not a plugin to show gravatars in comments :)

Now, onto a few examples to show what's it like and what you could do with it :

In your post, type something like :

  1. Hello ! My name is <a href="mailto:ozh@l33temail.com">Ozh</a>. My buddy [gravatar:dju@coolemail.net]dju`[/gravatar] has a cool gravatar !

And it will output the following :

Hello ! My name is OzhOzh. My buddy dju`dju` has a cool gravatar !

Cool isn't it ? (Hover your mouse over the words with a tiny yellow border)

Show me more !

This plugins adds a popup avatar to the following patterns :

  1. <a href="mailto:">name</a>
  2. [avatar:email@web]text[/avatar]
  3. [avatar:comment]name[/avatar]
  4. [mailto:name]text [/avatar]

Here are some live examples of different uses :

Regular mailto: link

  1. <a href="mailto:ozh@l33temail.com">Send me an email</a>

Result :


Another mailto: link, but with some style already

  1. <a href="mailto:ozh@l33temail.com" class="meta">Me again</a>

Result : avatar class is applied along with preset styles, and does not override.


A mailto link with probably no gravatar defined

  1. Send a mail to <a href="mailto:spam@aol.com">these dudes</a> !

Result : avatar class is applied along with preset styles, and does not override.

A mailto: link you don't want to personalize

  1. <a href="mailto:abuse@yahoo.com" noavatar>spam</a>

Result: a regular mailto: link, except that the email address is still encrypted (look at the source of this page)

Adding a gravatar to a word, not a mailto

  1. [avatar:dju@djublog.net]my friend dju`[/avatar]

Result : pops-up a gravatar


Adding a gravatar of one of your commenters, and you don't know or remember his email address

  1. [avatar:comment]Polo[/avatar]

Result : pops a gravatar, using email address used in the last comment on your site with this name


Adding a mailto: link to one of your commenters, and you don't know his email address

  1. [mailto:BB2K]send him a mail[/mailto]

Result : outputs a regular mailto: link, and the associated gravatar, using email address used in the last comment on your site with this name

Using your own images for pop-up avatars

  1. My son [avatar:http://planetozh.com/gallery/oscar.jpg]Oscar[/avatar] is serious

Result: a classical hover pop up

My son Oscar is serious

Mixing things altogether

  1. You can
  2.  [avatar:/ozh/images/old-postcard.jpg]<a href="mailto:ozh@dot.com" noavatar>mail me</a>[/avatar],
  3.  and those using [avatar:http://wordpress.org/style/header-logo.png]<a href="http://wordpress.org/">Wordpress</a>[/avatar]
  4.  are [avatar:/ozh/images/mr-t.gif]cool[/avatar] !

Result: pop-up frenzy !

You can mail me , and those using WordPress are cool

Tell me more !

  • First of all, you may have understood : these popups are 100% CSS based, there is no javascript involved. They need your browser to have a decent CSS support, in other words : it's not working with MSIE. Sorry :)
    If there is a demand for it, and if I can find a light javascript file to generate this kind of popup for MSIE, I'll probably implement. But as for now, since after a (real) quick search, I just could find js script bloated with tons of useless features, I dropped it.
  • Each mailto link is "encrypted", so for instance ozh@ozh.com
    becomes :
  • Each Gravatar is fetched using a secure md5 hash, so your privacy is absolutely guaranted and reading the source of the page doesn't reveal your email
  • The plugin outputs clean feeds, removing any avatar popup (added in version 1.1)
  • And, of course, the generated code is valid XHTML for all you markup maniacs.

Using this plugin is easy : just download it, put it in wp-content/plugins/, activate it in your plugins admin interface, and forget it !

Cool ! Want it !

Download the plugin :
Extract and upload to your blog, preserving directory structure if any.
Note: download counter here and stats on wordpress.org may differ and reflect the number of downloads before this plugin was hosted on the plugin directory

You can also configure a few things. To do so, edit the plugin file itself (with a raw text editor, or right from within the admin interface)

This defines the sizes of popup images from Gravatar. They are 80×80 pixels by default, but you can lower the size (increasing it will probably produce ugly results)

This one defines the default gravatar, to be used when the email adress is not registered with Gravatars (ie your buddy did not sign up for a free Gravatar ! go tell him !)
You need here an image URI, such as http://yourblog.com/blog/images/default_gravatar.gif. The image can be of any size and proportion, and will not be affected by previous setting.

You define here the css <style> you want to apply to pop-ups and links, which will be added to the head section of every page of your blog

If set to 1, print the style as previously defined in every <head> section.
But you could also, and I recommend it, add the popup styling section to your main and site-wide CSS, saving a few extra bits in every page. In such a case, set this var to 0 (zero).

Version History

  • 1.0
    Initial realease
  • 1.1
    Fixed feeds that now remove the avatar markup to produce simple and raw text

Credit, feedback, disclaimer, stuff

I had the idea of this plugin when I saw a tiny face pop up on a site when I hovered a name. In my mind immediately popped "hoooooo gotta do gravatar with this". I found later that the pop-up was from a very simple WordPress plugin by Owen, named Acropop. I used the CSS for the popups of his plugin.

A few images used here without permission. Sue me.

Please do not ask for support with some CSS problem. I suck at CSS.

Go get a Gravatar. It's cool, free, reliable, and cool. By the way, did I say that it's cool ?

Play with WordPress. Until it breaks, hack it !

Shorter URL

Want to share or tweet this page? Please use this short URL: http://ozh.in/ld


This page "WordPress Plugin : Avatar Popup" was posted on 23/04/2005 at 3:06 pm
Watch this discussion : Comments RSS 2.0.

52 Blablas

  1. Avatar Pop-up

    Personalize your blog : show avatars….

  2. RaynerApe says:

    This is incredible! I have been asking for something like this for a very long time, not Gravatar-oriented specifically but a way to popup images when pointing at a word. Now I have it and I think I am going to be in love with it. Thanks again for the excellent work.

    [Ozh's edit: having "rape" in one's email address is probably a bad idea if you want to survive spam filters :) ]

  3. RaynerTheApe says:

    Off-topic: LOL! Aside from Yahoo, you are the second person to let me know about this unfortunate misspelling of my nickname. And I wonder why so many blogs give me a white page and don't accept my nickname and/or email. :)

  4. Polo says:

    Super, je vais devoir passer a wp rien que pour ca ;)
    J'ai juste une remarque, c'est a propos du flux rss, je sait pas si l'interface des plugins wp te le permet mais ca serais pas mal de charger les gravatars en petite taille car ils appraissent directment dans le texte quand on visualise avec un agrégateur rss.

  5. Ozh says:

    Ah oui, effectivement je n'avais pas pensé au flux RSS. (Je n'y pense d'ailleurs jamais, j'ai remarqué il y a quelques jours que les posts bilingues dans le flux c'est le bordel)

    Je vais réfléchir à la meilleure manière de filtrer ça, merci de la remarque.

  6. Mr. Dew says:

    This is pretty cool, I seen it work in Opera, unfortunately it doesn't work in IE.

  7. Ronald says:

    Nice work! Gravatars in comments are often shown in an ugly way, with this plugin its a lot better.

  8. Marc says:

    Great, I'll be adding this in a few days.

  9. Niklas says:

    Cool! I've started to enable it for my posts, but what I'd really love is a way to enable a button among my Quicktagsto use this great plug-in in a good way.

    Another note: I tried to use another plug-in, AcroPop, before I installed yours. The force of that plug-in, was that you could set it to display avatars depending on the name. If I added "Niklas" to its list, it automatically underlined my name wherever it appeared in my blog, and made an avatar available. The problem was, whenever I used an IMG-tag to display a picture in one of my posts, the plug-in disabled the IMG-functionality, which made me abandon it altogether.

    Thanks yet again! Developers like you make WordPress much more fun to use, as you can personalise the entire experience.

  10. Ozh says:

    Niklas, I have already had the very same idea and I've started to code it, I'll release it in the next couple of days. It uses a neat interface in the Admin section, easy to add and remove avatars without editing the plugin.

  11. Niklas says:

    Ozh, sweet news! I'm very much looking forward to it. I hope it'll let those of us who don't use Gravatars (or who don't have friends who use it, anyway) to use avatars that are linked by using the [avata…]hey[/ava…]-function.

  12. skippy says:

    Great work, Ozh! This is a really neat trick.

  13. Angela says:

    I LOVE IT! Thanks so much for this neato plugin!! :)

  14. Vidar says:

    Holy Rutabagas! This is some wicked cool stuff man!

  15. Niklas says:

    Hey, Ozh!

    How that Quicktag developing coming along? Cheers!

  16. Marc says:

    I have had sucess using this plugin but only if I embed the CSS in the head section of the page.

    If I place it in the normal style sheet for the page it fails and will always show the image.

    Any ideas on how to fix this?

  17. Ozh says:

    This means that your own CSS declarations override the avatar popups style, this is either an inheritance or a precedence problem. Basically, your css probably contains a style ("display: block" maybe ?) and is declared *after* the avatar popups.

  18. Niklas says:

    Thanks a lot Ozh, your latest version of Avatar Popup solves the problem with the avatar popping up in the RSS feed! I'm a very happy camper now. :-)

  19. Philippe says:

    je viens d' installer ton plugin sur un de mes blogs:
    http://www.swingcheese.net et il fonctionne super bien. par contre sur un autre: http://www.swingcheese.de il ne veut pas marcher. je pense que c' est à cause des parantheses [ et]
    mais je n' en suis pas sur. merci encore pour ce plugin qui est vraiment bien et sympa.
    ps: si tu as une idée…

  20. Philippe says:

    en fait, il me donne error 500
    un probleme de ht.access??

  21. […] The WordPress plug-in-contest is through, and I found Avatar Popup to be the best (even though I'm still waiting for a promised easy-to-use admin quicktag interface), apart from Popularity Contest. […]

  22. La Bella says:

    Hi there Ozh!
    I just installed your plugin on my blog and for some reason, when I insert the code for gravatar, it doesn't pop up. Nothing shows up. :-S

    I know I installed it correctly because I installed it on my test blog and it ran perfectly fine.
    I don't know what the reason could be.
    Would u mind taking a quick glance and maybe checking it out? If it's not a bother?
    Thanks in advance!
    AWESOME plugin, btw!

  23. travis says:

    I love the idea of your plugin and the way that it works on your page, but it's not working the same for me. I don't get any popups for the standard mailto tags, and the [avatar:] tags will only pull up the default "?". I even tried pasting one of your exact examples with the same result. Also, are there supposed to be tag buttons in the wysiwyg editor for the posts?

    Great work with this, I only hope that I can get it to work as well as you have :)


  24. Yves says:

    Je souhaite compléter le site ci-dessus avec un blog pour mémoriser les souvenirs des hôtes du gîte et que ceux-ci puissent y poster leurs commentaire.
    Je souhaite y incluse des images timbre et que par un clique elles puissent être agrandies. Avatar me semnbble être parfait pour cela. J'ai bien tenter de l'insdtaller mais sans succes, de nombreux messages d'erreurs apparaissent. Ou puis-je trouver la doc d'installation ?

  25. Ozh says:

    Yves » tout ce qui est disponible est sur cette page ici-même.

  26. Yves says:

    Désolé d'être un incapable ….
    En activant le plug-in je rencontre l'erreur suivante : Parse error: parse error in /home/httpd/vhosts/sunsetsurfcamp.com/httpdocs/wordpress/wp-content/plugins/wp_ozh_avatarpopup.php on line 31

  27. DDSD says:

    Wirklich eine tolle Idee, wenn auch nicht ideal gemacht :P

  28. maryla says:

    Wery nice plugin, I was just looking for somthing like it :). But it's a smal problem with UTF-8 [wp-plugins.net:This plugin's description contains invalid UTF-8 characters.] Can You rewrite the plugin to fix it or check it? Because some of us can't use Your plugin without some nasty signs on the site

    Thx ;)

  29. Extremo says:

    Nice plugin, I'm just about to implement :)

  30. kim says:

    I was wondering if you can help me implement this into my site.. when user hovers over the "posted by.. blah blah"

    i can email u any file u think i might need editing..

  31. Alfredo says:

    Thanks for the plugin! Bookmarked it now and will add it to my blog soon :)

  32. […] Avatar Popup Generate a (pure CSS) popup from email addresses (or associate it with any text or link you want), popup containing either an image of your choice, or the associated Gravatar. […]

  33. cardinalfang says:

    Echoing Kim's comment above: it would be nice to implement this in the "By" statement under a post, so that a rollover of the post author's name led to a avatar popup.

    Got any ideas?

  34. […] following sites might be of use for me to get this happening: Gravatar and the Broken Image Icon Gravatar Popup Plugin CSS Styling for Alternating Colours & Author Comment Background WordPress Codex – Using […]

  35. […] to [avatar:ozh@planetozh.com]Ozh[/avatar] for his WordPress Avatar Plugin (Version 1.1) which I just […]

  36. Mr Gray says:

    Thanks for the plugin Ozh.

  37. […] Avatar Blogging Popup This WordPress Plugin allows you to personalize, if not humanize, your posts, adding popups containings avatars next to mailto links, as well as next to any word. […]

  38. jason says:

    Is their something I need to do other than activatign the plugin in the admin section? It doesn't seem to be doing anything. It doesn't do anything with a mailto, and it doesn't convert any of the code you have above.

    btw. what do you use for the comments? I would love to have my comments look like this.

  39. […] WP官方下载页面 | 插件作者下载页面 […]

  40. Mihai says:

    Thx…Another great plugin :)

  41. Antonio P. says:

    Thanks for that great plugin. I use it and i am satisfied with it. I want to mention that the mixing option is great. In that way you can create an unique layout.
    Best regards,
    Antonio P.

  42. Red@ says:

    is this plugin still Working on the WordPress 2.5 ???

  43. Ozh says:

    @Red@: Don't know??? Are you running it??? Does it look like it's not running??? Why do you always put 3 points d'interrogation partout???

  44. […] Ozh' Avatar Popup Ozh???Wordpress????????????????????????????????????Gravatar??????????????????????Tips??? […]

  45. […] dem Avatar Popup Plugin von Ozh kann man Avatars neben mailto Links oder jedem beliebigen Wort in einem Popup erscheinen […]

  46. […] popups containings avatars next to mailto links, as well as next to any word. You can chose …..read more Download Plugin! Version 1.1 Last Updated: September 28, 2007 […]

  47. […] it for you. For documentation and tips, please refer to the official plugin page for Avatar Popup …..read more Download Plugin! Version 1.1 Last Updated: September 28, 2007 Plugin Owner: Ozh Visit […]

  48. mario says:

    Hello Ozh,
    first of all thanks for this plugin.
    I've a strange behaviour here (wp v.284): it basically works but images will display very very small.(they look like Win menu's icons)
    I tried to edit size from 80 to 150 up to 500 but it seems such a value doesn't affect popup size.
    It happens with all common browsers.
    What I'm doing wrong?

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar and sign for a free account
Spam: Various spam plugins may be activated. I'll put pins in a Voodoo doll if you spam me.