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 ? :)
The problem
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.
The solution
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
The uber lazy bloggers can steal mine : gravatar_default.gif and pixel.gif (right click, Save as..)
1: the PHP generating the avatar's URL
- <?php
- $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" />
- </a>
- </div>
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.
First, put the two needed images (gravatar_default.gif and pixel.gif) in blogroot/wp-content/themes/default/images/ (or in your own theme directory)
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 :
- <?php
- $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(); ?>" />
- </a>
- </div>
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 :)
Shorter URL
Want to share or tweet this post? Please use this short URL: http://ozh.in/54
Je vais te laisser le soin de tester avant de m'y mettre alors =)
Bah c'est testé déjà , c'est dans mon redesign que je termine avant de mettre sur le site.
Not bad, not bad… Didn't think of the broken image, I'll update my php. Just avoid empty gifs: who needs server round-trips for one or more 1px gifs that are transparent? If you're going for a bg image, go for it the whole way! Add the gravatar as a background to the gravatar container, one way or another. But that's gonna prove tricky in css… Hum. (Thinking). Check back on http://goulvench.free.fr/index.php?id=a236 in a cpl of days to see if I find a solution.
Nice sniffing btw, but I'm French. Just happen to be in Sweden, so don't rely on that! :P
[…] —ãŸã€‚GravatarãŒè½ã¡ã¦ã„ã‚‹ã¨è‡ªåˆ†ã®ã‚¢ãƒã‚¿ãƒ¼ã‚‚表示ã•ã‚Œãªã„よã†ã§ã€ã“れを解決ã™ã‚‹ãƒ—ラグインや〠[…]
[…] Gravatar implementation with PHP and CSS – The Raven Ground Autograv – I am Morgan Knutson Gravatar and the Broken Image Icon – Planet Ozh Identity […]
[…] Gravatar implementation with PHP and CSS – The Raven Ground Autograv – I am Morgan Knutson Gravatar and the Broken Image Icon – Planet Ozh Identity […]
Thats very cool…but wheres the avatars
nice site.
Where to get the transparent image?
[…] 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 […]
[…] have included the code for that which i followed the steps given by this guy Code Unfortunately it isn't working. So gotta […]
Replica watches,Siwss watches,Japan watches,Rolex watches,Omega,Gucci,Louis Vuitton,watches,Breitling,Vacheron Constantin,Chanel,Cartier,Bvlgari,Jacob & Co,Chopard,D&G watches Alain Silberstein,A Lange & Sohne,Porsche Design Watches,Mont Blanc,Patek Philippe,TAG Heuer,Jaeger,LeCoultre,pretty watches,high quality watches,fake watches
http://onestoptown.com
Holy shit, this is ingenious but so simple at the same time. Looking at the source of the core get_avatar() function it seems like they still aren't using this method, but just using the image directly… This seems like a MUCH better idea. I'll have to use this instead if we switch to Grav (i'm sick of dealing with avatars locally, what a headache).