Many blog platforms feature profile pictures of comment authors in their respective comment sections. Blogger is, unfortunately and inexplicably, not one of them. When I rolled out the new template for WITFITS I for sure wanted to add that feature, even if it wasn't supported through Blogger's API. There are some automated (i.e. script-driven) hacks out there for doing this, but they usually rely on an external script or access to external hosting somewhere. My method forgoes those complications but requires a certain level of manual labor. For a small blog like WITFITS where the majority of commentors are regulars, my system works out just fine.

Here's how it works: Everyone that has a Blogger account has a unique ID associated with that account. When they comment, I grab that ID and look for a picture on my Photobucket account with the same name. If there is one, that picture is put next to their comments. In addition, anonymous commentors get an appropriate image, and regular visitors who don't use a Blogger account are taken care of through some hard-coding in the script. Collecting the images to be used for the comments is where the "manual" part of this method comes in. Every time someone new comments on the site I have to go into their Blogger profile and copy their profile image to my Photobucket account, saving it with the name of their profile ID. Additionally, I tend to do some resizing and/or cropping to save bandwidth and improve the look of the picture as it appears in the comments. Once I've done this initial step, the image is in place, and will show up every time that users comments.

Here's how you can implement it in your Blogger blog:

1. Acquire a place to store your copies of the commentor profile pictures. I use Photobucket, but there are other image hosts out there (as long as you can name the files and have them all reside under the same path, choose whatever is most convenient/appropriate for you).
2. Open your blog's template code by choosing Template->Edit HTML from the Blogger dashboard. You will likely need to check the "Expand Widget Templates" checkbox as well. As always, when mucking with your template it is best to save a backup copy.
   
3. Look for the section near the top of the template where your CSS style information is kept. Depending on your template it will either be between the <style> tags or the <b:skin> tags. Somewhere in there (perhaps near the end, before the </style> or ]]> < /b:skin>) insert the following CSS:
   
   1. /* Style for Comment Author Image Script below (http://www.katonian.net/2007/09/manual-method-for-adding-comment-author.html) */
   2. img.CommentImage {
   3.    width: IMAGE_WIDTHpx;
   4.    height: IMAGE_HEIGHTpx;
   5. }


4. Replace IMAGE_WIDTH and IMAGE_HEIGHT with whatever size you will want the images next to the comments to be (in pixels). You can specify just the width if you like, removing line 4. Specifying this in the style sheet makes it easier to modify the styling of the image later (such as adding borders, padding, etc.)
   
5. Insert the following code into your template where you want the image of the commentor to appear:
   
   1. <!-- Comment Author Photo Script (http://www.katonian.net/2007/09/manual-method-for-adding-comment-author.html) -->
   2. <script type='text/javascript'>
   3.    var authorURL = "<data:theComment.authorUrl/>";
   4.    var author = "<data:theComment.author/>";
   5.    var jpgURL = "";
   7.    authorURL = authorURL.toLowerCase();
   8.    author = author.toLowerCase();
   10.    // Handles anonymous posters
   11.    if ( author.match( "anonymous" ) )
   12.       jpgURL = "PATH_TO_ANONYMOUS_IMAGE";
   14.    // For specific commentors who don't use a Blogger/Google account but link
   15.    // to their webpage, look to see if part of their URL matches something specific
   16.    else if ( authorURL.match( "SOME_PART_OF_LOWERCASE_URL" ) )
   17.       jpgURL = "PATH_TO_URL_MATCH_IMAGE";
   19.    // For specific commentors who don't use a Blogger/Google account and don't
   20.    // link to a webpage, look to see if their name matches something specific.
   21.    else if ( author.match( "SOME_LOWERCASE_NAME" ) )
   22.       jpgURL = "PATH_TO_NAME_MATCH_IMAGE";
   24.    // For everyone who has a Blogger/Google account, use the image whose name is
   25.    // the same as their id (pulled from the URL of their Blogger profile page).
   26.    else
   27.       jpgURL = "PATH_TO_COMMENTOR_IMAGE_DIRECTORY" + authorURL.substring( 31 ) + ".jpg";
   29.    // Write into the HTML the image appropriate for the commentor, as dictated by the code above. Use the
   30.    // onerror attribute of the img tag to specify an alternate photo if this image url isn't valid.
   31.    document.write( "<img class="CommentImage" src='" + jpgURL + "' onerror='this.onerror=null;this.src=\"PATH_TO_NO_IMAGE\";'/>" );
   32. </script>


6. Replace the capitalized words in step two with the appropriate paths specific to your blog:
   
   • Line 12: Replace PATH_TO_ANONYMOUS_IMAGE with the URL to the comment photo you want to use for anonymous comments. For example: http://i4.photobucket.com/albums/y142/witfits/Commentors/Anonymous.jpg
   • Line 16: Replace SOME_PART_OF_LOWERCASE_URL with the URL (in all lowercase letters) a commentor supplies as their homepage when they post to your blog but don't have a Google/Blogger account. For example: Commentor FooBar doesn't have an account, he signs his comments with the name FooBar and homepage url http://www.FooBar.com. So you would replace SOME_PART_OF_LOWERCASE_URL with something like foobar.com (note the omission of www, since some commentors forgo it when leaving their web address)
   • Line 17: Replace PATH_TO_URL_MATCH_IMAGE with the URL to the comment photo you want to use for the person tested for on line 16. For the fictional example listed in 16, I might use something like this: http://i4.photobucket.com/albums/y142/witfits/Commentors/FooBar.jpg
     Note: You can repeat lines 16 and 17 for any number of commentors to your blog that might not have Blogger/Google accounts but who supply their homepage url. Or you could remove them from your code if you don't need them.
   • Line 21: Replace SOME_LOWERCASE_NAME with the name (in all lowercase letters) of a commentor who doesn't have a Google/Blogger account and only supplies a name when they comment, but no homepage URL. Example: FooBar posted a comment on your blog, signing it with the name FooBar, but left no homepage. You would replace SOME_LOWERCASE_NAME with foobar.
   • Line 22: Replace PATH_TO_NAME_MATCH_IMAGE with the URL to the comment photo you want to use for the person tested for on line 21. For the fictional example listed in 21, I might use something like this: http://i4.photobucket.com/albums/y142/witfits/Commentors/FooBar.jpg
     Note: You can repeat lines 21 and 22 for any number of commentors to your blog that might not have Blogger/Google accounts but who supply their name. Or you could remove them from your code if you don't need them.
     
   • Line 27: Replace PATH_TO_COMMENTOR_IMAGE_DIRECTORY with the URL of the directory in which all of your commentor pictures reside. For instance, here at WITFITS I would replace that with http://i4.photobucket.com/albums/y142/witfits/Commentors/
   • Line 31: Replace PATH_TO_NO_IMAGE with the URL to the comment image you want to use for commentors you haven't gotten around to making an image for. For example, here at WITFITS I use: http://i4.photobucket.com/albums/y142/witfits/Commentors/NoImage.gif. When the Javascript runs to insert the commentor images, if it doesn't find one for a particular commentor, it will substitute this one.
7. Save your template.
   
8. Create an image for anonymous commentors. Name it appropriately (e.g. Anonymous.jpg) and upload it to your image hosting service to the appropriate directory (i.e. the one that you reference in line 12 of the code).
9. Create an image for specific commentors that don't have a Google/Blogger account and simply leave their name or name and homepage address. Name them appropriately and upload them to your image hosting service to the appropriate directory (i.e. the ones you reference in code, such as lines 17 and 22).
10. Create an image for commentors that have Google/Blogger account, either by copying the image on their Blogger profile page or supplying your own, and upload it to your image hosting service to the appropriate directory (i.e. the one you reference in line 27 of the code). Name it the same as their account ID number which can be found in the URL for their profile page (in most default templates, blogger accounts of the commentor are linked to in their comment). If for instance you were to do this with me, you'd note that my Blogger Profile URL is http://www.blogger.com/profile/15228307619229587737 and therefore you'd make a commentor image for me called 15228307619229587737.jpg.
    
11. Create an image for commentors you haven't gotten around to, or don't feel the need to, make a comment author image for. Name it appropriately (e.g. NoImage.jpg), and upload it to your hosting service to the appropriate directory (i.e. the one you reference in line 31 of the code).

Repeat steps 9 and 10 above as necessary.

A Note On Image Size And Quality: Using the above method, you can simply copy the image on someone's Blogger profile and use it for their comment author image unaltered (other than changing the name and uploading it to your hosting service). Since most of these images tend to be large (in pixels) we display them at a smaller, fixed size when displayed in the comments. Unfortunately, when you display an image at a size other than its own, it can tend to look a little crummy (depending on how nicely the browser you are using scales images). Also, it wastes bandwidth (since you still have to load this large image even if you show it at a smaller size.) My solution to this is to resize all of my commentor images before I upload them to Photobucket. I bring them into an image editor (in my case, Photoshop), and shrink them to a fixed-size, sometimes cropping or editing slightly to make the resulting image square while preserving the aspect ratio. This adds a small amount of time and work to the process, but resizing an image in an editor will result in a much better smaller image than what a browser might render as a result of resampling and blending that occurs when an image editor resizes.