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. Ozh says:

    mario ยป isn't this a CSS problem? Like, a declaration in your theme CSS overrides everything

  2. mario says:

    That's possible at all.
    I use 'naked' Thematics Framework, no child theme.
    I'm not a 'code guy' really so after a spare lookout in default css I surrender.
    Honestly I don't know where or how to hack it in order to let plugin working well.
    I read your great plugin is for advanced users but I did try anyway as in many cases plugin's default settings will work also for noobs like me…and I was attracted by your examples with wp logo and mr.T so I made it 'easy' as it's not.
    It's a pity as your plugin does exactly what I'm searching for: a simple popup callout at hovering mouse.
    Thanks anyway

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.