{"id":223,"date":"2005-03-20T16:12:58","date_gmt":"2005-03-20T15:12:58","guid":{"rendered":"http:\/\/frenchfragfactory.net\/ozh\/archives\/2005\/03\/20\/gravatar-and-the-broken-image-icon\/"},"modified":"2007-05-08T16:15:02","modified_gmt":"2007-05-08T14:15:02","slug":"gravatar-and-the-broken-image-icon","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2005\/03\/gravatar-and-the-broken-image-icon\/","title":{"rendered":"Gravatar and the Broken Image Icon"},"content":{"rendered":"

I'm currently redesigning this site and I think I'm going to give Gravatar<\/a> 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<\/em>.<\/p>\n

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.<\/p>\n

<\/p>\n

Wait, wait. Gra-va-what ?<\/h2>\n

Gravatar<\/a> is a free centralized database of avatars<\/a>, hence its name : g<\/strong>lobally r<\/strong>ecognized avatar<\/strong>. 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<\/a>.<\/p>\n

In one word : it's cool. Can we go on ? :)<\/p>\n

The problem<\/h2>\n

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<\/em>". While it can sometimes actually be pretty<\/a>, most of the times, it sucks. Firefox users have some options to avoid this (in about:config<\/a> set browser.display.show_image_placeholders<\/strong> to false<\/strong>) but as far as I know, there no such thing in MSIE.<\/p>\n

The solution<\/h2>\n

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<\/a>. The paths and vars used here are "generic", you'll have to figure out how to adapt this for your blog on your own.<\/p>\n

You'll need two images :<\/p>\n

    \n
  1. a default avatar, used when the commenters did not register with Gravatar, named gravatar_default.gif here<\/li>\n
  2. a transparent image, like a single transparent pixel, named pixel.gif here<\/li>\n<\/ol>\n

    The uber lazy bloggers can steal mine : gravatar_default.gif<\/a> and pixel.gif<\/a> (right click, Save as..)<\/p>\n

    1: the PHP generating the avatar's URL<\/strong><\/p>\n

    <?php\r\n$grav_default = "http:\/\/yoursite.com\/images\/gravatar_default.gif";\r\n$grav_size = 40;\r\n$grav_email = $comment_author_email;\r\n$grav_url = "http:\/\/www.gravatar.com\/avatar.php?gravatar_id=" . md5($grav_email) . "&amp;default=" . urlencode($grav_default) . "&amp;size=" . $grav_size;\r\n?><\/code><\/pre><\/div>\n
    2: the PHP & HTML used to display the avatar<\/strong><\/p>\n
    <div class="gravatar">\r\n <a title="Author's avatar">\r\n  <img src="http:\/\/yoursite.com\/images\/pixel.gif" class="gravatar_img"\r\n   style="background: url('<?php echo $grav_url; ?>');"\r\n   alt="Author's avatar" \/>\r\n <\/a>\r\n<\/div><\/code><\/pre><\/div>\n
    That's the trick. The avatar img src<\/strong> is a transparent pixel, and the background<\/strong> 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.<\/p>\n
    Note<\/strong>: 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.<\/p>\n
    Code for WordPress users<\/h2>\n
    Happy users of WordPress<\/a>, here is the exact code you'll need.<\/p>\n
    First, put the two needed images (gravatar_default.gif<\/a> and pixel.gif<\/a>) in blogroot<\/em>\/wp-content\/themes\/default\/images\/<\/strong> (or in your own theme directory)<\/p>\n
    Then edit blogroot<\/em>\/wp-content\/themes\/default\/comments.php<\/strong> (or, again, in your own theme directory) and locate the following line, around line 30 :<\/p>\n
    <?php foreach ($comments as $comment) : ?><\/code><\/pre><\/div>\n
    Right after this one, put the following code :<\/p>\n
    <?php\r\n $grav_default = get_bloginfo('template_directory') . "\/images\/gravatar_default.gif" ;\r\n $grav_size = 40 ; \/\/ size of the image\r\n $grav_email = $comment->comment_author_email ;\r\n $grav_url = "http:\/\/www.gravatar.com\/avatar.php?gravatar_id=" . md5($grav_email) . "&amp;default=" . urlencode($grav_default) . "&amp;size=" . $grav_size ;\r\n?><\/code><\/pre><\/div>\n
    Then, two lines below, locate the following code :<\/p>\n
    <cite><?php comment_author_link() ?><\/cite> Says:<br \/><\/code><\/pre><\/div>\n
    Right before it, add the following bits :<\/p>\n
    <div class="gravatar">\r\n<a title="<?php comment_author(); ?>">\r\n<img  class="gravatar_img" src="<?php echo get_bloginfo('template_directory') ?>\/images\/pixel.gif"\r\n style="background: url('<?php echo $grav_url; ?>');" alt="<?php comment_author(); ?>" \/>\r\n<\/a>\r\n<\/div><\/code><\/pre><\/div>\n
    Of course you'll have to style the result, using class gravatar<\/em> and gravatar_img<\/em> as provided in this example. And of course, I can be of no help on this matter :)<\/p>\n","protected":false},"excerpt":{"rendered":"
    Implement Gravatar with no fear of the site being offline<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[2,55,94,10,245],"class_list":["post-223","post","type-post","status-publish","format-standard","hentry","tag-code","tag-css","tag-gravatar","tag-php","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}