One of the best things about Flickr is the community. Having people comment on your photos is not only rewarding because you know others appreciate your work, but it can help you improve your photography through valuable feedback that otherwise may be difficult to receive.

The other side of the coin, though, is when people spam comments with lazy, ugly and large images which provide very little or often nothing at all of value to the discussion. The image to the right shows an example of lazily cut-and-pasted comments which provide no more value than where the person saw the image. I’m sure the photo’s owner knows exactly where it could be found, since they put it there! These sorts of images are a real bugbear with me as I’d rather have no comments than what is little more than some sort of mutual admiration club.

To that end, I created a small Greasemonkey script which hides all images inside Flickr comments and thought it might be a good little tutorial for others who may want to create their own. Note that you do need to know JavaScript to a reasonable level to make these scripts and you also need to be able to understand how other developers have made their pages. Firefox coupled with the FireBug plugin are lifesavers for in-depth viewing of web pages.

To start off, you need to put some metadata tags at the top of your file:

// ==UserScript==
// @name          Flickr - Hide Comment Images
// @namespace     http://flickr.com/
// @description	  Hide those annoying comment images!
// @include       http://flickr.com/*
// @include       http://*.flickr.com/*
// ==/UserScript==

These tags tell Greasemonkey all about your file, and on which websites it should run. There is more on this metadata at mozdev.org. Now, let’s get into the real meat of the script. I’m going to start in the middle and explain the main part works, as the rest should be self-explanatory to any seasoned JavaScript developer.

commentField = document.getElementById(imgFields[i]);
commentImages = commentField.getElementsByTagName('IMG');

We first create a JavaScript object of the DOM object we want to check (most likely where all the comments are stored). I’ll explain “imgFields[i]” later. Next, we create an array of all of the <img> objects (images) which we will loop through:

        for (j=0; j<commentImages.length; j++) {
            if ((commentImages[j].className == imgClass) && (commentImages[j].src.indexOf(imgLocation) == -1 )) {
                commentImages[j].style.display = 'none';
                commentImages[j].style.visibility = 'collapse';
            }
        }

We loop through all of the images in the array. We check two things: The first is to see if the image has the right “class” associated with it (different images in Flickr comments have different classes — the buddy icons are different to in-comment icons). Since we want to be friendly to the “buddy icon reply” Greasemonkey script the second thing we check is that the image we’re about to hide isn’t actually a Buddy Icon in disguise.

If the image isn’t a Buddy Icon and is an in-comment image, then we change the display settings to hide it. That’s pretty much the script in a nutshell.

To make things a little bit more robust, we’ll next check out the entire script:

// ==UserScript==
// @name Flickr - Hide Comment Images
// @namespace http://flickr.com/
// @description Hide those annoying comment images!
// @include http://flickr.com/*
// @include http://*.flickr.com/*
// ==/UserScript==

var imgFields = new Array('DiscussPhoto', 'recent-activity');
var imgClass = 'notsowide';
var imgLocation = '/buddyicons/';

for (i=0; i<imgFields.length; i++) {
    if (document.getElementById(imgFields[i])) {
        commentField = document.getElementById(imgFields[i]);
        commentImages = commentField.getElementsByTagName('IMG');

        for (j=0; j<commentImages.length; j++) {
            if ((commentImages[j].className == imgClass) && (commentImages[j].src.indexOf(imgLocation) == -1 )) {
                commentImages[j].style.display = 'none';
                commentImages[j].style.visibility = 'collapse';
            }
        }
    }
}

The three var lines create three things. The first is an array of which sections of Flickr pages to examine. The second is the “class” we want to look at. The third is where the Buddy Icons are stored.

Next, on line 13 we start to loop through all the “imgFields” (or the sections to examine). Just after, we check to see if the section exists, if it does we continue on. The rest of the code has been documented.

Save the file somewhere (the Desktop will do). The name of the file must end with user.js or Greasemonkey will ignore. Something like FlickrCommentImageHide.user.js will do.

Finally, drag-and-drop the file onto Firefox. You’ll be prompted to install the script. Do so and next time you load either the main page, the Recent Activity page or an individual photo’s page, all those annoying images will be hidden!

Other notes: If people post other images (for example, to similar photos or to other versions of the same photo they considered uploading) you will not see them. You can disable Greasemonkey temporarily to view these photos. I consider it a small price to pay.

You may also want to expand on the script. For example, if, after the image was removed there was only a link, perhaps the comment isn’t worth viewing at all.

The Infinite Flickr group is a silly idea, and seems to invite silly photos. For my shot today I thought I’d try and inject a bit of a Hitchcockian sinister viewer mood.

I think I do come across as a very seedy or sinister individual here. Whether it meets their guidelines or not, it’s the only shot I’m doing for today.

Today I set myself a challenge of making a somewhat believable Photoshopped image. The challenge was to create a shot where I could be seen in the reflection of my sunglasses, which I was wearing at the same time.

The result turned out quite well, since recreating the same position of the glasses while holding them by hand proved to be difficult — even with me in front of the camera being directed by Justine! — so I had to do a lot more faking in Photoshop than I originally expected.

It might not be the best shot I’ve taken for the 365 days project, but I’m happy that it’s a believable enough shot.

This was taken the day we arrived in Munich. In this vicinity are a number of large buildings, which were possibly palaces or at least or some importance long ago, as well as a beautiful pagoda and fountains surrounding it.

Looking through the shots of Munich tonight reminded me that our trip really started getting great in Munich. I’m not sure whether we were finally in “holiday mode”, or if the other places hadn’t taken our fancy (Paris did, upon our return later, that’s for sure), or if we just began to relax.

Either way, we were both taken with Bavaria and it’s beauty.

Side of a freight train at Amsterdam’s Centraal Station.

Taken while eating curry and fritjes (me) and mayonnaise and fritjes (Justine). We were waiting for our overnight train from Amsterdam to Munich and grabbed a hurried dinner from a crappy diner.

This is the last photo I took in Holland.

Taken while Justine and I were on a walk around the block. A bit overprocessed but I wanted to try and bring out the texture in my hair.