Open Directory

Blogging colleagues, that’s nice. Follow their private lives or their children growing up, without even visiting them. But what happens when they try to hack their own blog together, using a lot of "cool" technologies which have more a negative than a positive influence on their productivity. We (other colleagues and I) are bashing since forever on planethofstede.be. Of course, we’re happy he finally has some kind of blog in stead of a folder containing a bunch of images, but he is still holding on to the thought that he’s a programmer and he should implement his own blog – a thought I have given up a long time ago. Using pre build software is much easier and is done by people who knows more about these things than you do.

Not only you can’t add any comments on planethofstede.be (and thus we have to use our own blogs to comment) and is the name that shows up in Google Reader <div xmlns=”http://www.w3.org/1999/xhtml” xmlns:ns0=”http://www.w3.org/1999/xhtml”>www.planethofstede.be</div> in stead of a human readable name, but even worse is his “photo album” that is nothing but a bunch of public accessible folders in which you have to select every photo one by one and in which you don’t have a clue what the image will look like (no thumbnails, no overview, nothing).

This phenomena has a name. Such a public accessible folder is called an Open Directory and is known on more sites than planethofstede.be. This way, there are people who have written a little javascript that allows you to open the images in such an Open Directory in a more user-friendly way. This javascript however is showing all images in full size and the images on planethofstede.be are not even scaled down, making it impossible to view the entire image at once. So I changed the script in a way that the browser will scale the image down if necessary.

Now, how can we use this script to see planethofstede.be‘s images? Quite simple. Add the script as bookmark.

Copy the following script entirely:
javascript:var%20sHTML='<html><head><title>Photoviewer</title></head>\n<body%20style="background-color:#121212;font-family:tahoma,verdana,sans-serif">\n\t<div%20align="center">\n';for(x=0;x<document.links.length;x++){link=document.links[x].href.toLowerCase();if((link.indexOf('.jpg')!=-1)||(link.indexOf('.gif')!=-1)||(link.indexOf('.png')!=-1)||(link.indexOf('.bmp')!=-1)){sHTML+='\t\t<a%20href="'+document.links[x].href+'"><img%20src="'+document.links[x].href+'"%20style="border:0px;max-width:'+(document.body.clientWidth-40)+'px;width:expression(this.width>'+(document.body.clientWidth-40)+'?'+(document.body.clientWidth-40)+':true);max-height:'+(document.body.clientHeight-40)+'px;width:expression(this.width>'+(document.body.clientHeight-40)+'?'+(document.body.clientHeight-40)+':true);"/></a><div%20style="color:#fefefe;margin-bottom:30px;">'+link.substring(link.lastIndexOf('/')+1,link.lastIndexOf('.')).replace(/-/g,'%20')+'</div>\n'}}sHTML+="\t</div>\n</body></html>";document.body.innerHTML=sHTML;
Add a new bookmark (called Favorite in Internet Explorer) and use the script as "Location" or :
1. If you’re using Firefox:
  - Click "Bookmarks" in the menu and choose "Organize Bookmarks".
  - In the window that appears there, right click on "Bookmarks Toolbar" or "Bookmarks Menu" and choose "New Bookmark".
  - As "Name", you can choose "Open Directory" and you paste the script (you just copied) in the "Location" field.
  - Save that bookmark.
2. In Internet Explorer, it’s different because you don’t have a procedure to add a bookmark like this, but you can download this URL and copy it to your Favorites folder (On Windows XP, this is the folder C:\Documents and Settings\<username>\Favorites). You can do the same for Firefox: download the url and drag it to the Bookmarks Manager.
Now, go to a folder on the planethofstede.be website – which will show you an index of images – and then Click Bookmarks > Open Directory (i.e. the bookmark you just created). The javascript will be executed and you’ll see the images one above the other.

Admittedly, this procedure isn’t user-friendly at all, but I can’t add a “click here to add the bookmark” since Firefox nor Internet Explorer will allow a creation of such a bookmark. But once installed, you have a nicer way to see planethofstede.be‘s photo gallery.

Edit Thanks Nick (Mr planethofstede.be himself) to add the description functionality to the script. I took my chance to change the script a little more and add some more styling. The script now has a dark background and horizontal lines are separating the images and their descriptions from the next image.

Edit 2: As suggested, the horizontal lines are removed and I’m using a margin of 30px instead. I also noticed the portrait-shaped photo’s still needed scrolling as only the width was adapted, not the height. Now the height is modified if the image is too large to fit in the browser window. I also made the images clickable, so that you can click-to-view the original image. Right click and selecting "show image" would work too, but that implies two clicks and a mouse move – thus more effort 😉