I'm currently redesigning this site and I think I'm going to give Gravatar a go. Something I've been worrying about is the fact that Gravatar is centralized, so when its site happens to be (momentarily and exceptionnally) offline, displaying a gravatar shows the ugly broken image icon.
So, I've come up with a simple and CSS way to avoid this. Display a proper avatar when available, display no image when offline.
Wait, wait. Gra-va-what ?
Gravatar is a free centralized database of avatars, hence its name : globally recognized avatar. On all the sites and weblogs using Gravatar, the same avatar can impersonnify you. And there are more and more weblogs using Gravatar, including very popular ones.
In one word : it's cool. Can we go on ? :)
Sometimes a website can become unavailable. Trying to display an image from this server only shows a tiny red cross, also known as "the broken image icon". While it can sometimes actually be pretty, most of the times, it sucks. Firefox users have some options to avoid this (in about:config set browser.display.show_image_placeholders to false) but as far as I know, there no such thing in MSIE.
In short, instead of using an IMG tag, the Gravatar URL is specified in a CSS style sheet. The PHP code generating the avatar is mostly similar to the original code. The paths and vars used here are "generic", you'll have to figure out how to adapt this for your blog on your own.
You'll need two images :
- a default avatar, used when the commenters did not register with Gravatar, named gravatar_default.gif here
- a transparent image, like a single transparent pixel, named pixel.gif here
1: the PHP generating the avatar's URL
- $grav_default = "http://yoursite.com/images/gravatar_default.gif";
- $grav_size = 40;
- $grav_email = $comment_author_email;
- $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=" . md5($grav_email) . "&default=" . urlencode($grav_default) . "&size=" . $grav_size;
2: the PHP & HTML used to display the avatar
- <div class="gravatar">
- <a title="Author's avatar">
- <img src="http://yoursite.com/images/pixel.gif" class="gravatar_img"
- style="background: url('<?php echo $grav_url; ?>');"
- alt="Author's avatar" />
That's the trick. The avatar img src is a transparent pixel, and the background is the real image. Should the server be unavailable (try replacing echo $grav_url with echo "blah"), it will show… nothing. Just the transparent pixel. And XHTML markup evangelists be not scared, it does validate.
Note: you can even set the default avatar to be a transparent pixel, so you will display no avatar for people not registered there. This trick ensures you to always display something proper for registered users, Gravatar.com being available or not.
Code for WordPress users
Happy users of WordPress, here is the exact code you'll need.
Then edit blogroot/wp-content/themes/default/comments.php (or, again, in your own theme directory) and locate the following line, around line 30 :
- <?php foreach ($comments as $comment) : ?>
Right after this one, put the following code :
- $grav_default = get_bloginfo('template_directory') . "/images/gravatar_default.gif" ;
- $grav_size = 40 ; // size of the image
- $grav_email = $comment->comment_author_email ;
- $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=" . md5($grav_email) . "&default=" . urlencode($grav_default) . "&size=" . $grav_size ;
Then, two lines below, locate the following code :
- <cite><?php comment_author_link() ?></cite> Says:<br />
Right before it, add the following bits :
- <div class="gravatar">
- <a title="<?php comment_author(); ?>">
- <img class="gravatar_img" src="<?php echo get_bloginfo('template_directory') ?>/images/pixel.gif"
- style="background: url('<?php echo $grav_url; ?>');" alt="<?php comment_author(); ?>" />
Of course you'll have to style the result, using class gravatar and gravatar_img as provided in this example. And of course, I can be of no help on this matter :)
Want to share or tweet this post? Please use this short URL: http://ozh.in/54