WordPress Plugin : Avatar Popup « planetOzh

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 :

And it will output the following :

Hello ! My name is Ozh. My buddy 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 :

Here are some live examples of different uses :

Regular mailto: link

Result :

Ozh

 
Another mailto: link, but with some style already

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

Ozh

 
A mailto link with probably no gravatar defined

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

my friends

 
A mailto: link you don't want to personalize

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

Result : pops-up a gravatar

dju`

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

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

Polo

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

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

send him a mail

 
Using your own images for pop-up avatars

Result: a classical hover pop up

My son Oscar is serious

 
Mixing things altogether

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 :
  ozh@ozh.com
• 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 !

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)

$wp_ozh_avatar['size']
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)

$wp_ozh_avatar['default']
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.

$wp_ozh_avatar['css']
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

$wp_ozh_avatar['printcss']
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 !