This article was written in 2009. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

A photo site that looks good in Lynx

My one and a half year old daughter started making things. And when kids start making things parents start collecting them. I don’t collect her drawings yet but, much easier, I collect the pictures she takes with my wife’s iPhone. Now I didn’t want to make a virtual shoe box on my own computer which is put away to collect dust and never to be seen again, no, I decided to make a website. But how do you make a website for a one and a half year old kid? Work with visuals of course, that’s easy. And don’t use letters or numbers because she won’t understand them so why bother?

Using visuals is easy on a photo site, not using letters is harder. Sure, just don’t use text in the body and you won’t see any letters but how do you make links when there’s no (alt) text? And what do you do with the title-tag when you think, like I do, that every page should have a unique title?

The solution was pretty easy. Every picture Kiki has taken with the iPhone has a unique file name, something like img_1234.jpg. We can remove the ‘IMG_’ and ‘.jpg’ parts since they are the same for every image, it’s the numbers that make all image names unique. I wrote a simple script that replaces every number with a symbol which (a) has an entity name, (b) looks simple, and (c) shows up in the title bar in Internet Explorer. Not all entities show up there, most are represented as a square. So now every page had a unique title of four symbols. Too short so I decided to mirror the string of symbols to make it longer. This is the PHP function I wrote, the array with the symbols is included so you don’t have to look for symbols that work the next time you need this.

function returnSymbols($image){
$huh = array("1","2","3","4","5","6","7","8","9","0","IMG_",".jpg");
$aha = array("‾","—","¨","⊕","¦", "◊","¤","°","·","…","","");
$nice = str_replace($huh, $aha, $image);
$boom = explode(';', $nice);
$ecin = $boom[3].';'.$boom[2].';'.$boom[1].';'.$boom[0].';';
return $ecin.$nice;
}

I also use this function to give every thumbnail a unique alt text. And this is what makes this site so special I think: it’s the first photo site that looks good in every browser, not only in graphical browsers, it even looks good in Lynx!

Kiki's photo site in Lynx

Now, does anybody know a way to get rid of the letters that show up in the address bar and the status bar?