Comment Author Photos

Alright, Vivek asked me about adding comment author pics for blogger beta, so I went looking and found that Singpolyma had already done this for pre-beta Blogger. After looking at it a little more it looked like it would work for the beta too.

Here's what you wanna do... First of all go to Template -> Edit HTML, check the box for Expanding the widget template, and find the commenting section:

      <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentphoto' style='float:right;'/>
            <a expr:name='"comment-" + data:comment.id'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
<div style='clear:both;'/>
        </b:loop>
      </dl>

The 2 lines in bold are what you add. You can change float:right to float:left if you want the pic to be on the left instead of the right

Now scroll back up and add the following before the </header> tag:

<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Optionally, you could replace the external javascript file

http://jscripts.ning.com/get.php?xn_auth=no&id=830605

with

http://yggomelprup.googlepages.com/blogger_comment_photos.js

where I've tweaked a bug where the default (noimage) image wouldn't show up in some cases, and I've limited the size of the pics to 60x75. I'm also using a different default image.

To read more about this head over to Singpolyma - Technical Blog

Update of the Update :P
Here's what I updated in the external javascript file (the parts in bold are what I added or changed):

/* Script by Stephen Paul Weber a.k.a. Singpolyma (http://singpolyma-tech.blogspot.com/)
   Based on work by Johan Sundstrom (http://ecmanaut.blogspot.com/2005/10/blogger-hack-inline-comment-faces.html)
   Updated by PurpleMoggy (http://purplemoggy.blogspot.com/)
*/

if( document.all && !document.getElementsByTagName )
  document.getElementsByTagName = function( nodeName )
  {
    if( nodeName == '*' ) return document.all;
    var result = [], rightName = new RegExp( nodeName, 'i' ), i;
    for( i=0; i<document.all.length; i++ )
      if( rightName.test( document.all[i].nodeName ) )
 result.push( document.all[i] );
    return result;
  };
document.getElementsByClassName = function( className, nodeName )
{
  var result = [], tag = nodeName||'*', node, seek, i;
  var rightClass = new RegExp( '(^| )'+ className +'( |$)' );
  seek = document.getElementsByTagName( tag );
  for( i=0; i<seek.length; i++ )
    if( rightClass.test( (node = seek[i]).className ) )
      result.push( seek[i] );
  return result;
};
function writeScript(src) {
  var thescript = document.createElement("script");
  thescript.type = "text/javascript";
  thescript.src = src;
  document.body.appendChild(thescript);
}//end function writeScript
function addLoadEvent(func) {
         var oldonload = window.onload;
         if (typeof window.onload != 'function') {
            window.onload = func;
         } else {
            window.onload = function() {
               oldonload();
               func();
            }
         }//end if
}//end function addLoadEvent
BloggerProfiles = {};
BloggerProfiles.callbacks = {};
BloggerProfiles.noimage = 'http://img139.imageshack.us/img139/1011/defaultavatarad7.png';
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;
BloggerProfiles.callbacks.profile = function(data) {
          if(data.photo) {
             node = document.createElement('img');
             node.alt = 'Photo';
             if(!data.photo.url)
                data.photo.url = BloggerProfiles.noimage;
             node.src = data.photo.url;
             if(data.photo.width)
                node.width = data.photo.width;
             if(data.photo.height)
                node.height = data.photo.height;
             if (node.width > BloggerProfiles.imageWidth) {
                node.height = (BloggerProfiles.imageWidth * node.height) / node.width;
                node.width = BloggerProfiles.imageWidth;
             }
             if (node.height > BloggerProfiles.imageHeight) {
                node.width = (BloggerProfiles.imageHeight * node.width) / node.height;
                node.height = BloggerProfiles.imageHeight;
             }
             thecomments = document.getElementsByClassName('commentphoto-'+escape(data.url));
             for(var i=0; i<thecomments.length; i++)
                thecomments[i].appendChild(node.cloneNode(false));
             if(data.blogs) {
                for(var i=0; i<data.blogs.length; i++) {
                   if(data.blogs[i].url == BloggerProfiles.blogurl) {
                      thecomments = document.getElementsByClassName('commentblock-'+escape(data.url));
                      for(var i2=0; i2<thecomments.length; i2++) {
                         thecomments[i2].style.color = BloggerProfiles.color;
                         thecomments[i2].style.backgroundColor = BloggerProfiles.bgcolor;
                      }//end for thecomments
                   }//end if blogs.url == blogurl
                }//end for blogs
             }//end if data.blogs
          }//end if data.photo
          else {
             node = document.createElement('img');
             node.alt = 'Photo';
             node.src = BloggerProfiles.noimage;
             if (node.width > BloggerProfiles.imageWidth) {
                node.height = (BloggerProfiles.imageWidth * node.height) / node.width;
                node.width = BloggerProfiles.imageWidth;
             }
             if (node.height > BloggerProfiles.imageHeight) {
                node.width = (BloggerProfiles.imageHeight * node.width) / node.height;
                node.height = BloggerProfiles.imageHeight;
             }
             thecomments = document.getElementsByClassName('commentphoto-'+escape(data.url));
             for(var i=0; i<thecomments.length; i++)
                thecomments[i].appendChild(node.cloneNode(false));
             if(data.blogs) {
                for(var i=0; i<data.blogs.length; i++) {
                   if(data.blogs[i].url == BloggerProfiles.blogurl) {
                      thecomments = document.getElementsByClassName('commentblock-'+escape(data.url));
                      for(var i2=0; i2<thecomments.length; i2++) {
                         thecomments[i2].style.color = BloggerProfiles.color;
                         thecomments[i2].style.backgroundColor = BloggerProfiles.bgcolor;
                      }//end for thecomments
                   }//end if blogs.url == blogurl
                }//end for blogs
             }//end if data.blogs
          }//end else
}//end callback
function showCommentPhotos(photoclass,linkclass,linknum,fullclass,blogurl,color,bgcolor) {
  var comments, comlinks, i, node, re, by, blocks;
  BloggerProfiles.blogurl = blogurl;
  BloggerProfiles.color = color;
  BloggerProfiles.bgcolor = bgcolor;
  re = new RegExp( '^http://www.blogger.com/profile/\\d+', 'i' );
  comments = document.getElementsByClassName(photoclass);
  comlinks = document.getElementsByClassName(linkclass);
  if(fullclass)
     blocks = document.getElementsByClassName(fullclass);
  else
     blocks = [];
  var profilesobj = {};
  var profileurls = [];
  for(i=0; i<comments.length; i++) {
    by = comlinks[i].getElementsByTagName('a').item(linknum);
    if(by && re.test(by.href)) {
       comments[i].className += ' commentphoto-'+escape(by.href);
       if(blocks && blocks[i])
          blocks[i].className += ' commentblock-'+escape(by.href);
    } else {
       comments[i].className += ' commentphoto-nophoto'+i;
    }//end if-else
    if( !by || !re.test( by.href ) ) {BloggerProfiles.callbacks.profile({'url':'nophoto'+i,'photo':{'url':BloggerProfiles.noimage}});continue;}
    if(!profilesobj[by.href])
       profileurls.push(by.href);
    profilesobj[by.href] = true;
  }//end for
  for(i=0; i<profileurls.length; i++)
     writeScript('http://singpolymaplay.ning.com/bloggerProfile.php?xn_auth=no&url='+encodeURIComponent(profileurls[i]));
}//end function showCommentPhotos

There's nothing in this file you need to customize anymore. If you'd like to customize the default picture, or customize the max height & width then you can just do something like the following (in place of the 2nd codebox above):

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://img304.imageshack.us/img304/3518/rect18st2.png';
BloggerProfiles.imageWidth = 10;
BloggerProfiles.imageHeight = 20;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

The 3 lines in bold are optional. If you don't want to limit the width & height then you can just set those 2 lines to some ridiculously high number, like 1000. The BloggerProfiles.noimage line will work with both Singpolyma's external javascript file as well as mine. The BloggerProfiles.imageWidth & BloggerProfiles.imageHeight lines will only work with mine.