Manoli's Behind the Shades - The making of my gallery

Yes I'm crazy...

So I'm crazy to have a doubly- (recentry triply-) linked gallery with 398 pictures (now 623) (750 as of 9/28/99) (2231 in 50 folder on 5/5/05), thumbnails, frames, stories, javascript, 4 ways of navigation and no broken links. To illustrate the ways of navigations, take for example, Greece: text index, add Pictures, add Frames, add JavaScript. However, there is a secret behind its making. As you have probably guessed (unless you think i'm really insane) I didn't sit down and type up every single page of it. In fact, the only page I did manually (or almost by hand) is the trips list. But I'm sure that when (if) i decide to ever update it, it's going to be automated like the rest.

So, let's take a look at this gallery structure. Every place visited has its own folder. For example, the folder greece contains all the pictures from Greece and the folder greece/thumb contains all the thumbnails, the same pictures, only smaller (160x108 or 108x160). It goes the same for all the pictures from France (in folder france), Santorini (santorini), New York (ny) and so on. As you have noticed by now, every place has a name, and a folder name. Moreover, every place has its color. The pictures from Greece paint shades of Blue. The pictures from the Boston skyline span the shades of Red, and so on. We must keep track of three different names for every place.

Now, for the different ways of navigation, there are three main ways of browsing the pictures from Greece. The first one uses the frames one reaches when first visiting my gallery. On the right, there is a description of Greece, then a bunch of thumbnails, and on a huge frame on the left, all.html, a list of the picture names from Greece: chatons (means kitties in French), el-passo-fournos (means the oven in the garden in Greek, and El Passo is what we called our summer house), el-passo-sikia (sikia is fig tree), thalata (is what the Athenian army screamed when encountering the sea). It's all Greek to you. Not very informative. In fact, the names only mean something to me, but hey, that was the first version of my gallery. The good part with that is that you don't need more than one click to go from viewing a picture in Greece to viewing a picture in France. Moreover, supposing you know the name of a picture somewhere in my gallery, you can just search for it there, on the huge all.html file. The other good thing is that it helped me get an estimate of how big my gallery is. At any point i know how many pictures are indexed.

So, since names don't have a place in a picture gallery, you get all those thumbnails, so that you can choose directly what picture you'd like to see, get a preview, and enlarge it if you're interested. Those are contained is the main file, greece.html. It gives first a description of Greece, and then a bunch of thumbnails, classified in categories like El-Passo, Sounion, Other. The problem with this approach is that you have to go back every time from seeing the enlarged picture to see the thumbnails, choose another picture, go to the enlarged version, go back to the thumbnails, and so on. This is why i created the all.html file, so that you can click one picture after the other, and go from enlarged version to enlarged version, without ever having to hit the back button. (But then again, those names don't mean anything to you).

So recently (Fall 98), I added another navigation method, which is a frame for every place. greece-frame.html loads two pages, on the left the thumbnails greece-thumbs.html one on top of the other, and on the right, the description and thumbnail gallery greece.html. Now the user can choose either really fast a picture he or she likes really from the gallery of thumbnails, or they can go down the thumbnails on the left, and enlarge all the interesting ones. Pretty cool huh?

The next feature was a next and prev button for every page. These were done the hard way. I told every folder which one was the previous and the next place to visit. The folder though does take care of the rest for me. This allow users to browse the entire gallery without having to ever see the all.html file that would help them remember where to go next. They just click on the next button, and depending on which navigation method they are currently using, they are taken to the correspondingly next page.

After those self-contained pages were ready, I was able to put links for them at the top page. The links were even smaller thumbnails, 80x54, half of the original thumbnails on each dimension. I liked the compactness of those thumbnails, however, they were a little too small to fully satisfy me. So the next step was to include a JavaScript to display the picture under the mouse in a larger version as the user is moving the mouse over the images. This combined the compactness, the large thumbnail, and the speed of previewing before going to the actual image.

I liked this changing image idea, and the compactness, speed, and coolness factors, so i decided to incorporate those ideas on each individual page of the gallery. So each folder acquired four three more files: greece-javaframe.html created a three-page frame structure. On the right, the normal description and thumbnails greece.html. On the left, at the top a normal size thumbnail 160x108, and under it two columns of half-size thumbnails 80x54 that the user can scroll through, while seeing the image they are currently pointing at change to full size on the top thumbnail. The corner thumbnail is at greece-javacorner.html and the rows of thumbnails at greece-javathumbs.html.

..., but I'm lazy too

This structure is replicated 27 times. Generating it automatically is not smart, it's normal. Generating it by hand would be pure mazochism. So I wrote this C program (preview) that generates stuff automatically. It is called 27 times by a script that combines the pictures of different files to generate all.html.

The only files that i have to create are then greece-list and greece-description that contain the list of image files within the greece folder and the description of Greece for my homepage. The format of a list file is very simple. The first line is the shades color, the second the English name of the place, and the third line is the name of the folder that contains the pictures. The next two lines have recently been added for prev and next. Then comes the list of pictures. Each line is basically an image name (to which .jpg is added). The only exception to the rule is that after an empty line comes a title for a subsection.

One more thing, in order to make the gallery mobile, one shouldn't hardcode the location of the pictures, which now happens to be the LCS graphics server simply coz they're the nicest people around. If however, the files are moved, then i can update the gallery-href file, and all picture references will be changed in the generated files. Moreover, if the gallery needs to be split up to fit in different locations, then individual base href's can be specified for individual folders. If greece-href exists, then it will override the default href, and be used as that folder's base.