Posts Tagged ‘greasemonkey’

Flickr – Hide Annoying Comment Images

October 30th, 2008 - 11:43am - No Comments »

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.

« Older Entries