{"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

    \n\n\t\t
    \n\n\t\t
    \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
    php<\/div>\n\n\t\t\n\t\t
    \n\n\t<\/div>\n\t\n\t
    \n\t\t
    1. <?php<\/span><\/div><\/li>\n
    2. $grav_default<\/span> =<\/span> "http:\/\/yoursite.com\/images\/gravatar_default.gif"<\/span>;<\/span><\/div><\/li>\n
    3. $grav_size<\/span> =<\/span> 40<\/span>;<\/span><\/div><\/li>\n
    4. $grav_email<\/span> =<\/span> $comment_author_email<\/span>;<\/span><\/div><\/li>\n
    5. $grav_url<\/span> =<\/span> "http:\/\/www.gravatar.com\/avatar.php?gravatar_id="<\/span> .<\/span> md5<\/span>(<\/span>$grav_email<\/span>)<\/span> .<\/span> "&amp;default="<\/span> .<\/span> urlencode<\/span>(<\/span>$grav_default<\/span>)<\/span> .<\/span> "&amp;size="<\/span> .<\/span> $grav_size<\/span>;<\/span><\/div><\/li>\n
    6. ?><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

      2: the PHP & HTML used to display the avatar<\/strong><\/p>\n

      \n\n\t\t
      \n\n\t\t
      \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
      HTML<\/div>\n\n\t\t\n\t\t
      \n\n\t<\/div>\n\t\n\t
      \n\t\t
      1. <div<\/span> class<\/span>=<\/span>"gravatar"<\/span>><\/span><\/div><\/li>\n
      2.  <a<\/span> title<\/span>=<\/span>"Author's avatar"<\/span>><\/span><\/div><\/li>\n
      3.   <img<\/span> src<\/span>=<\/span>"http:\/\/yoursite.com\/images\/pixel.gif"<\/span> class<\/span>=<\/span>"gravatar_img"<\/span><\/span><\/div><\/li>\n
      4.   style<\/span>=<\/span>"background: url('<?php echo $grav_url; ?><\/span><\/span>');"<\/div><\/li>\n
      5.    alt="Author's avatar" \/><\/div><\/li>\n
      6.  <\/<\/span>a<\/span>><\/span><\/div><\/li>\n
      7. <\/<\/span>div<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\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

        \n\n\t\t
        \n\n\t\t
        \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
        php<\/div>\n\n\t\t\n\t\t
        \n\n\t<\/div>\n\t\n\t
        \n\t\t
        1. <?php<\/span> foreach<\/span> (<\/span>$comments<\/span> as<\/span> $comment<\/span>)<\/span> :<\/span> ?><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

          Right after this one, put the following code :<\/p>\n

          \n\n\t\t
          \n\n\t\t
          \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
          php<\/div>\n\n\t\t\n\t\t
          \n\n\t<\/div>\n\t\n\t
          \n\t\t
          1. <?php<\/span><\/div><\/li>\n
          2.  $grav_default<\/span> =<\/span> get_bloginfo(<\/span>'template_directory'<\/span>)<\/span> .<\/span> "\/images\/gravatar_default.gif"<\/span> ;<\/span><\/div><\/li>\n
          3.  $grav_size<\/span> =<\/span> 40<\/span> ;<\/span> \/\/ size of the image<\/span><\/div><\/li>\n
          4.  $grav_email<\/span> =<\/span> $comment<\/span>-><\/span>comment_author_email<\/span> ;<\/span><\/div><\/li>\n
          5.  $grav_url<\/span> =<\/span> "http:\/\/www.gravatar.com\/avatar.php?gravatar_id="<\/span> .<\/span> md5<\/span>(<\/span>$grav_email<\/span>)<\/span> .<\/span> "&amp;default="<\/span> .<\/span> urlencode<\/span>(<\/span>$grav_default<\/span>)<\/span> .<\/span> "&amp;size="<\/span> .<\/span> $grav_size<\/span> ;<\/span><\/div><\/li>\n
          6. ?><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

            Then, two lines below, locate the following code :<\/p>\n

            \n\n\t\t
            \n\n\t\t
            \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
            HTML<\/div>\n\n\t\t\n\t\t
            \n\n\t<\/div>\n\t\n\t
            \n\t\t
            1. <cite<\/span>><?php comment_author_link(<\/span>)<\/span> ?><\/<\/span>cite<\/span>><\/span> Says:<br<\/span> \/<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

              Right before it, add the following bits :<\/p>\n

              \n\n\t\t
              \n\n\t\t
              \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
              HTML<\/div>\n\n\t\t\n\t\t
              \n\n\t<\/div>\n\t\n\t
              \n\t\t
              1. <div<\/span> class<\/span>=<\/span>"gravatar"<\/span>><\/span><\/div><\/li>\n
              2. <a<\/span> title<\/span>=<\/span>"<?php comment_author(); ?><\/span><\/span>"><\/div><\/li>\n
              3. <img<\/span>  class<\/span>=<\/span>"gravatar_img"<\/span> src<\/span>=<\/span>"<?php echo get_bloginfo('template_directory') ?><\/span><\/span>\/images\/pixel.gif"<\/div><\/li>\n
              4.  style="background: url('<?php echo $grav_url; ?><\/span>');" alt="<?php comment_author(<\/span>)<\/span>; ?><\/span>" \/><\/div><\/li>\n
              5. <\/<\/span>a<\/span>><\/span><\/div><\/li>\n
              6. <\/<\/span>div<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\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}]}}