Comment Icons

September 30th, 2003 11:02 PM

Following some of the RDF discussions from the previous post, I’ve got shiny new icons attached to comments (see the Bluetooth GPG post for an example).

What’s happening is this: My MT template is making use of a new tag, <$MTCommentAuthorIcon$>. If:

  • The author of a comment filled in the URL field, and
  • The URL references a page with RSS feeds that I can find with RSS auto-discovery, and
  • The RSS feed contains image data,

Then I add a div tag containing the (first) image (and optional link) to the beginning of the comment. The image is then styled with CSS that currently floats the div to the left and puts a border around it.

I’ve got some reservations about how I’m doing this right now. For one, I’m pulling the image data off of a potentially foreign webserver (my icon — the only icon in use at the moment — happens to be on the local server). This could be an issue if people wanted to fill in the URL field, but didn’t want my weblog pulling image data off of their server. Another issue is that very few people seem to use the image data in an RSS feed; I’m considering adding FOAF support (hello co-depiction readers :), but from my (albeit brief) investigation, the images used with foaf:depicts are too big to reasonably put into a comment block. RSS images seem to commonly be small enough that this isn’t a problem.

So, what do you think? Is this worthwhile? Should I be more intelligent in choosing the image to use if there are multiple possibilities? Should I prefer foaf:depicts images, but scale them to fit? Should I be downloading the images and pulling them off of the local server? I don’t know about the implications of this implementation, but I certainly like the look.

Update: Here’s a wacky idea I just had. I could query my gpg keyring for icons based on the email field instead of (in preference to) the URL. Thoughts?

Update: Download version 0.02 of MTCommentIcon

Update: Download version 1.003 of MTCommentIcon


Let’s see if this works :)

Posted by: l.m.orchard on October 1st, 2003 8:46 AM

I might just have to borrow this idea for my blog.

I’d say you might want to throw in a few hooks to limit image sizes, maybe scale to certain limits using Imagemagick or something. You might even want to have some editorial control over the images, in case someone decides that they need animated porn in their RSS feed. Lots of people on LiveJournal have chosen such images for their accounts.

Posted by: l.m.orchard on October 1st, 2003 9:47 AM

Oh yeah, and witness the formatting borken-ness.

Posted by: l.m.orchard on October 1st, 2003 9:50 AM

Good points. I could have a banlist for bad images.

And maybe scaling is going to be the best policy. Even your image is too big for a one line comment like “Oh yeah, and witness the formatting borken-ness.” (Oh, the formatting has been fixed in a half-assed sort of way.)

I’d offer you the code, but you’re using Blosxom these days, aren’t you?

Posted by: kasei on October 1st, 2003 10:04 AM

Very cool idea. To answer one of you comments, I thinking linking to webserver would be a better idea than downloading them to your server. Unless you put some sort of limit on file size on it. Plus if a person changes there image, it would be automatically reflected.

Posted by: nf0 on October 1st, 2003 10:48 AM

I think it could go either way. If you rely on the external server, yes the image will update if it’s ever changed, but the image might also disappear from the server and the icon, therefore, would disappear from the comment.

I think you’re right, though, that a size limit would be a good idea. As soon as I get some time to implement it (maybe tonight), I’ll give it a try.

Posted by: kasei on October 1st, 2003 10:56 AM

I’m guessing that it polls the data once. So if you add an image, after you have commented, it will not detect it?

From the Size limit side, i can just see somebody pointing to one of those 60meg nasa images.

Posted by: nf0 on October 1st, 2003 11:08 AM

Very cool, it does update. Not trying to spam you or anything, just playing around a little.

Posted by: nf0 on October 1st, 2003 11:11 AM

Of course, you could go whole-hog and programatically sanity-check the size of the image. What about looking for favicon images, as an alternative?

Posted by: Dougal Campbell on October 1st, 2003 11:31 AM

Another one playing (creator of WinRSS). Btw, my post should also have a picture.

Dougal, about favicons we use them in WinRSS and it is not too standard: many websites use ICO, PNG, others BMP, GIF. Each browser displays a set of them, but not the others.

Posted by: Manuel Gonzalez on October 1st, 2003 12:10 PM

Ok, I’m just testing this even though I reckon it might be a very good idea. Good job! (if it works ;-)

Posted by: Antonio Cavedoni on October 1st, 2003 12:12 PM

If I understand this, I should get a button-logo here.

Posted by: Ole on October 1st, 2003 12:12 PM

Oh well - I got it wrong. Time to fiddle..

Posted by: Ole on October 1st, 2003 12:15 PM

Ole - Looking at your RSS feed, I think the problem is on my end. I didn’t do a whole lot of testing on this - just enough to see that my icon worked ;)

I’ll take a look at it later tonight.

Posted by: kasei on October 1st, 2003 12:25 PM

I’m trying this out too.

Posted by: Jordan Share on October 1st, 2003 12:28 PM

Grr, got my blog url wrong….

Posted by: Jordan Share on October 1st, 2003 12:31 PM

Third try - I have now changed the image tag, making it look more like the others’.

Posted by: Ole on October 1st, 2003 12:35 PM

Definitely an awesome idea.

(Plans to put an image in his rss feed)

Posted by: Daniel Von Fange on October 1st, 2003 3:03 PM

Oh, yes, I’m using blosxom… but code is code. If you’re willing to share, I could probably tease something out of it for my setup.

Oh, and BTW: Getting some strange errors now, trying to post this

Posted by: l.m.orchard on October 1st, 2003 3:13 PM

When I wrote that, I didn’t think there’d be a lot to give you as the vast majority of the code was in setting up the MT handler. But now I’ve got a lot more going on (sorry for the errors - I was hacking on the live server ;). It is now saving local thumbnail files (no bigger than 64px on a side), and using them. (Although for now I’ve lost the title and href attributes on the image.)

The code is mostly untested, and has bugs and needs features, but you can get it here:

It requires XML::RSS, LWP::Simple, HTML::RSSAutodiscovery, File::Spec, and Image::Magick::Thumbnail.

Have fun.

Posted by: kasei on October 1st, 2003 4:40 PM

What field(s) are looked at in the RDF for it? Also, what about those of us whose websites aren’t just a weblog and typically link to our index page? Perhaps instead of looking at just auto-discovered RDF it could also see if there’s, say, <LINK rel=”authorpic” href=””> or similar (which would also be easier than RDF auto-discovery and so on).

Neat idea, in any case. :)

Posted by: fluffy on October 1st, 2003 6:19 PM

I have to try, it sounds so cool…

Posted by: dda on October 1st, 2003 7:16 PM

This is an awesome idea, but I think FOAF should be the preferred format. FOAF’s whole goal is to present a person’s online persona, which this image certainly is a part of.

RSS feed images seem to be more appropriate for TrackBacks to me, but I’m not sure why. I think because I see FOAF files and comments associated with people, but RSS feeds and TrackBacks associated with web sites. A subtle, maybe pedantic, distinction but that’s what I think.

I love the idea though and hope to have your code working on my site ASAP.

Posted by: George Hotelling on October 3rd, 2003 11:21 AM


FOAF support should be coming as soon as I get some more time to hack on it.

Regarding the FOAF/Comment, RSS/Trackback distinction, I think that’s a fantastic idea. I hadn’t even though to doing icons for trackbacks, but now that you mention it, it seems like a really obvious and elegant solution. Once FOAF support is in, I’ll see about getting icons for trackbacks.

Posted by: kasei on October 3rd, 2003 11:32 AM


Currently, I’m only looking for the image tag in the RDF feed. (And the RDF library I’m using doesn’t to support images that are defined as an rdf:resource yet). For sites without a relevant weblog to link to, I’d think that the FOAF idea would be the perfect fit (instead of, say, using ad-hoc LINK tags). What do you think?

Posted by: kasei on October 3rd, 2003 11:37 AM

I’m not entirely clear about what “the FOAF idea” is; it sounds like you’re referring to some specific package called FOAF, since there hasn’t been anything in this discussion which makes sense with just FOAF being the generic term for “friend-of-a-friend.” I only even came across this weblog post because I saw it linked to from 0xDECAFBAD.

So, I need a clarification. :)

Posted by: fluffy on October 3rd, 2003 12:16 PM

Okay, I’ve gone and setup a FOAF rdf on my site… thanks for the emailed explanations. :) So will my image appear here? I bet it won’t!

Posted by: fluffy on October 3rd, 2003 12:47 PM

Maybe it will now.

Posted by: fluffy on October 3rd, 2003 4:40 PM

Oops. It would help if I were to actually publish the page with the fixed MIME type.

Posted by: fluffy on October 3rd, 2003 4:52 PM

By the way, there’s something weird with either your CSS or with Safari.

Posted by: fluffy on October 3rd, 2003 6:06 PM

I think it’s a Safari bug. Camino, Opera and Firebird all display it correctly. OmniWeb has the same rendering problem which indicates it to be a redering bug in WebCore. IE has it’s own set of issues with the CSS (although it doesn’t look as bad as the Safari bug).

So unless someone can find something wrong with my XHTML or CSS, I’m going to chalk this up to a bug in WebCore.

Posted by: kasei on October 3rd, 2003 8:17 PM

Hm… I was just looking at the XHTML to see if I could at least trace where the weird overlapping issue is coming from, and I noticed a few things…

  • you could do it as <img class=”commenticon”> instead of wrapping it up inside a <div>

  • why not link the image to the URL?

  • why do all the ../../../../../../../../../../../ crap when you could just do /css/user.css? There’s a point at which relative links become rather pointless. :)

  • why does just point to some website about prescription medications?

  • why do you put !important into your site CSS? You should ONLY put !important into user CSS stuff (since that’s what it’s for, specifically overriding undesirable behavior from various non-accessibility-minded websites)… also, I have a feeling that the !important on the commenticon’s margin might be what’s tripping the bug in Safari.

Posted by: fluffy on October 3rd, 2003 11:17 PM

Must try. How nifty if my little image shows up. The color scheme is different from my large logo now, but it’s the same font at least.

Posted by: John Abbe on January 20th, 2004 7:43 PM

I have always looked for a possibility to find information as quick as I can. Now there is the internet. And I really appreciate people like you who take their chance in such an excellent way to give an impression on certain topics. Thanks for having me here.

Carlos Baker

Posted by: Carlos Baker on April 8th, 2004 4:21 PM