Singpolyma - Technical Blog: Comment Photos and Highlighting

2006-05-08

body

PurpleMoggy has created a set of instructions for using this on Blogger BETA. I have updated my hack to support his new features and fix the bugs he found. There is also now a new 'no image' image.

Awhile back I wrote a post detailing my hack for adding profile photos to comments. Unfortunately that post was rather technical in its explanation. This post attempts to deal with adding the hack to your blog in a more user-friendly fashion and also with using the hack to highlight blog-contributor comments.

Step 1 - The first thing you need to do is find the comment section in your blog template. Edit your template and scroll down until you find the <BlogItemComments> tag. The code inside should look something like this:

<div class="comment-poster" id="c<$BlogCommentNumber$>">
<a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</div>

<div class="comment-body">
<div class="innerCmntBody"><$BlogCommentBody$></div>
</div>

<div class="comment-timestamp">
<a href="#c<$BlogCommentNumber$>" title="comment permalink">4/26/2006 07:49:51 PM</a>
</div>

Step 2 - If you plan to use comment highlighting (so that the comments made by blog authors look different from those of users) this must be wrapped in another tag so that all of the code for each comment is in one tag. Like so:

<div class="commentelem">

<div class="comment-poster" id="c<$BlogCommentNumber$>">
<a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</div>

<div class="comment-body">
<div class="innerCmntBody"><$BlogCommentBody$></div>
</div>

<div class="comment-timestamp">
<a href="#c<$BlogCommentNumber$>" title="comment permalink">4/26/2006 07:49:51 PM</a>
</div>

</div>

Some blog templates will already have a tag around their comments, as will those using the 'standard' comment markup. If you have one of those templates just write down the class of the wrapping tag or add one (the underlined section above).

Step 3 - Next we need the class of the element where we can look for the link to the author. In the example code above this would be comment-poster. When in doubt use the class of the overall wrapping tag. Once you have it, write it down. Count the number of <a> tags there are before the <$BlogCommentAuthor$> tag and write this number down (in the above example it is 1).

Step 4 - The only thing left to do in this part of the code is to insert the element where the profile photo will go. Add this code right before the <$BlogCommentBody$> tag: <div class="commentphoto"></div>

Step 5 - Now go to the <head> section of your blog and add the following code:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605"></script>
<script type="text/javascript">
//<![CDATA[
function thisblog_showCommentPhotos() {showCommentPhotos('commentphoto','class of author wrapper',# of a tags,'main wrapper class','<$BlogURL$>','highlighted text colour','highlighted text background';}
addLoadEvent(thisblog_showCommentPhotos);});
//]]>
</script>

Where class of author wrapper is the class you wrote down in step 3, the # of a tags is the number you wrote down in step 3, and the main wrapper class is the class you wrote down in step 2. If you are not going to use comment highlighting the last for parameters can be left off (from main wrapper class to highlighted tex background) otherwise you have to fill in the color you with the text and background of highlighted comments to be in their appropriate spots above.

Step 6 - Save and Republish!

Tags:

Singpolyma at Monday, May 08, 2006 | 17 | 0 Backlinks | permalink

There is an RSS Feed for comments on this post.

Comment at 11 May, 2006 12:34 by Manas

body

Cool Man,where can I get the code for this comment form?
Comment at 11 May, 2006 12:39 by Singpolyma

body

@Manas - You can find that here: http://singpolyma-tech.blogspot.com/2006/01/new-inline-comments-form.html
Comment at 30 May, 2006 10:31 by Ching

body

Brilliant
Comment at 05 June, 2006 07:59 by indiblog

body

In the internet explorer, I didnt get the grey color :(
Comment at 05 June, 2006 08:11 by Singpolyma

body

hmm... that's odd... I just tested it and it shows up fine on my blog in my Internet Explorer... Is it showing up alright for you on my blog?
Comment at 08 June, 2006 16:27 by indiblog

body

nope.. here too, i didnt see the grey color.
Comment at 09 June, 2006 01:43 by Singpolyma

body

That's odd... I can't really find the problem because I works for me in IE... what version of IE are you using?
Comment at 01 August, 2006 22:47 by Martín

body

Sorry, but my english is not good, but I want to know in first place, haw can I do to change de image "NO IMAGE" if is posible, and in the second place, if I can resize all the image at the same format (in pixels)
Great work!
Comment at 02 September, 2006 03:23 by Glenn

body

id imagine you can do this by giving the div of where the picture is wrapped and changing the margins & boarder.. im gonna play arround with this later
Comment at 02 September, 2006 03:23 by Glenn

body

id imagine you can do this by giving the div of where the picture is wrapped and changing the margins & boarder.. im gonna play arround with this later
Comment at 02 September, 2006 03:23 by Glenn

body

id imagine you can do this by giving the div of where the picture is wrapped and changing the margins & boarder.. im gonna play arround with this later
Comment at 28 September, 2006 16:59 by Shmoolikipod

body

thanks man !
Comment at 28 September, 2006 18:42 by Shmoolikipod

body

I followed the instructions and I can't make it work...
M I missing some thingy?
( I even moved the script to my FTP , and used your Ex. As a my comment structure)
Is there anything I need to do before I try your hack ?
Comment at 29 September, 2006 07:42 by Shmoolikipod

body

Okay it does work but very slowly on IE.
for some reason it work very well on FF but on IE it takes lots of time till it work.
Comment at 19 October, 2006 10:25 by Karthik B.S.

body

Do we have to use the Inline comments for this to work?
Comment at 19 October, 2006 10:54 by Singpolyma

body

Do you mean do you need to have an inline comment form? No.

Do you mean do you need to have comments displaying somehow on your item pages? Yes. Blogger's ugly comment pages can be set to display images anyway...
Comment at 29 December, 2006 18:07 by Bloof

body

Wow this is great stuff, thanks!

-Bloof

2006-05-08

Trackbacks:

0 Backlinks

Syndication

FreshTags

Recent Comments

Archives