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 :
- 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.
- 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.
- If you’re using Firefox:
- 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.
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 😉
Useful post once you get past the ranting, but the information I encode in the filenames is lost using your script. Please accept the following, modified, script that displays cleaned up filenames as descriptions.
javascript:var%20sHTML='<html><head><title>Fotoviewer</title></head>\n<body>\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<img%20src="'+document.links[x].href+'"%20style="max-width:'+(document.body.clientWidth-40)+'px;width:expression(this.width>'+(document.body.clientWidth-40)+'?'+(document.body.clientWidth-40)+':true);"/><br/><h1>'+link.substring(link.lastIndexOf('/')+1,link.lastIndexOf('.')).replace(/-/g,'%20')+'</h1><br/>\n'}}sHTML+="\t</div>\n</body></html>";document.body.innerHTML=sHTML;
PS: The directory listing part is not something I’m proud of. It was simple and fast. I’m still figuring out how to write a real album that’s as cutting edge and as inaccessible as the main blog … maybe I’ll start by encoding the pictures using jpeg2000 🙂
> 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.
Wasn’t he clear when he stated the following?
http://www.planethofstede.be/blog/FnH/2007/9/25/hello_world
“The reason for this is that I didn’t just create a blog to write about me, my life or what troubles me in this world, but to learn and to practise my programming skills as well. That’s why I chose to create this website from the ground up, and that’s why you’ll probably have to suffer a few growing pangs from time to time.”
“Instead of creating a website that can be viewed by the majority of browsers, I’ll be developing this website using whatever fancy new technology I like. I will also try to comply with all relevant specifications, even if that means breaking 70% of the users out there …”
The main intent is to learn something and to support a standard. You better know how things are built and what the caveats are. This is all about principles and I deeply respect that. If more people would be brave enough we might get some standards-compliant browsers someday. So, don’t give up cowboy, I’m behind you.
Nonetheless, thanks for the tip on the open directory.
I didn’t mean to be rude or anything, It’s more a laugh. I don’t care that there are no comments, I don’t care that it can’t be viewed in inferior browsers, I mostly posted it for the javascript 🙂
I do respect the approach and as I stated: I lack the patience to build up such an entire codebase. So really, I’m sorry if I hurt anyone’s feelings, I didn’t mean to! I just wanted to introduce the javascript snippet in an original way 🙂
I did read it as a laugh, but still, props to Tars for finding my first post (especially since I still haven’t gotten around to creating archive links 🙂 )
I see you updated the script in the original post … I like the darker background but dislike the hairlines. Maybe we could change it to a bit of trailing space instead?
Is a good idea. I even noticed that portrait-shaped photo’s are still to large and need excessive scrolling, so I changed the script accordingly.
What’s wrong with your Google Reader? In mine, FnH’s blog simply shows up as ‘www.planethofstede.be’ without all the tags:
While not original, at least it looks better than the one preceding it (it’s DonnyDoubleDee‘s).
Your script contains a bug (aspect ratio is lost when both the client width and height are smaller than the image width and height respectively)
Furthermore, IE6 is limited to 508 characters in a bookmarklet.
I managed to fit the original logic into 494 characters using every trick I could think of, but that still didn’t leave enough room to fix the aspect bug 🙁
So here it is:
javascript:e='expression(this.';function%20f(w,v){return%20';max-'+w+':'+v+';'+w+':'+e+w+'>'+v+'?'+v+':true)'}s='<body%20style="background:#111;font-family:arial;color:#eee;text-align:center">';d=document;b=d.body;g=d.links;for(x=0;x<g.length;x++){l=g[x].href;if(/(gif|jpg|bmp|png)$/i.test(l)){s+='<a%20href="'+l+'"><img%20src="'+l+'"%20style="border:0'+f('width',b.clientWidth-40)+f('height',b.clientHeight-40)+'"></a><br>'+/[^/]*.{4}$/.exec(l)[0].replace(/-/g,'%20')+'<br><br>'}}b.innerHTML=s
I suggest that people hitting the aspect bug buy a bigger monitor, or switch to a browser that supports the standard max-width, max-height css properties instead of the non-standard evaluate function in css.
Actually, I think I like this version with only aspect-preserving width-scaling in IE better than the one with the aspect bug in IE.
And it fits in just 452 characters 🙂
javascript:s='<body%20style="background:#111;font-family:arial;color:#eee;text-align:center">';d=document;b=d.body;w=b.clientWidth-40;h=b.clientHeight-40;g=d.links;for(x=0;x<g.length;x++){l=g[x].href;if(/(gif|jpg|png)$/i.test(l)){s+='<a%20href="'+l+'"><img%20src="'+l+'"%20style="border:0;max-width:'+w+';width:'+'expression(this.width>'+w+'?'+w+':true);max-height:'+h+'"/></a><br>'+/[^/]*$/.exec(l)[0].split('.')[0].replace(/-/g,'%20')+'<br><br>'}}b.innerHTML=s
Enjoy 🙂
@Bertje: I didn’t name the link in Google Reader, so it appears like this:
Now, I can change the name manually in Google Reader, so I’m going to do that, but this is the name Reader has chosen automatically for me, probably because the title tag in that atom is
<div xmlns:ns0="http://www.w3.org/1999/xhtml">www.planethofstede.be</div>
</ns0:title>
in stead of something like
I didn’t name the link either because I haven’t found out how to yet.
… And now you mention it is possible to change feed names in Reader, I of course immediately find out how easy it is.
@Auric: leaving out the div would be violating the atom specification. If your title contains xhtml (and who wouldn’t want to use xhtml), the child has to be a div.
Blame Google Reader.
Even if you set type="text"?
But anyway. I figured it’s probably a bug in Reader. And I already changed it.
No, not if you set type=”text”, but I’m allowed to use xhtml, so I want to use xhtml 🙂