#! /usr/bin/env python # coding: utf-8 """ Usage: cat descrip | ./make_table.py > index.html Examines the descrip file and builds a table, with five columns of the images, complete with text and links to the medium, large, full size versions of the images. descrip looks like: 100_2455 h Driving down Miller Hill 100_2549 v Storage shed next to the red cabin Sizes: _thumb 150 x 200 _med 600 x 800 _lg 900 x 1200 .jpg 1524 x 2032 This script Copyright © 2007, Christopher Swingley, and licensed under the terms of the GNU General Public License v3.0. Use at your own risk. """ import sys columns = 4 current_column = 1 print """ Home Inspection, July 18, 2007

Home Inspection, July 18, 2007

We took a bunch of pictures of our potential new house during our home inspection. Click on the med, lg, or full links below each image to view the images at different resolutions.

If you want to download all the images at once, click on the links below (zipped file archives).

""" for line in sys.stdin.xreadlines(): line = line.strip() fields = line.split() image_base, orientation = fields[:2] descrip = ' '.join(fields[2:]) if not current_column % (columns + 1): print "" current_column = 1 if orientation == 'v': size = 'height="%s" width="%s"' % (200, 150) else: size = 'height="%s" width="%s"' % (150, 200) print '' % (image_base, image_base, size, descrip, image_base, image_base, image_base) current_column += 1 print "" print "

med lg full 
" print """

This page and all the pages that display images at various sizes was built using a pair of Python scripts I wrote. I started with a directory of full size images and used the ImageMagick convert command to build a series of images in different sizes. Something like:

$ mkdir processed
$ for i in for i in `ls *.jpg`; do convert -resize 200x200 $i processed/${i%%.*}_thumb.jpg; done
$ for i in for i in `ls *.jpg`; do convert -resize 800x800 $i processed/${i%%.*}_med.jpg; done
$ for i in for i in `ls *.jpg`; do convert -resize 1200x1200 $i processed/${i%%.*}_lg.jpg; done

Then I copied all the full size images into the processed directory:

$ cp *.jpg processed/.

I wrote a description file (descrip) that contains a list of all the image numbers (the part of the image filename before the _thumb or _med, etc.), whether the images were vertical or horizontal, and a description of the photo. Here are a few lines of descrip:

100_2455   h   Driving down Miller Hill
100_2549   v   Storage shed next to the red cabin
100_2550   h   Storage shed next to the red cabin
100_2545   v   Gate into southern dog yard area, covered dog shed in the back

They’re in the order I want them displayed on the pages.

Then I run make_table.py to generate the main page (the one you're on now):

$ cat descrip | ./make_table.py > index.html

Finally, run make_individual_html.py:

$ cat descrip | make_individual_html.py

to make all the individual pages for all the images in each size. There's also a CSS file named plain.css that I used to tweak the formatting a bit.

The great thing about this approach (writing short programs to build the HTML) is that it's really easy to change it later on do look differently, or organize the files in another way. Another approach would be to use PHP to parse the descrip file and build the pages dynamically. Or use a graphical tool to do it (Adobe PhotoShop, Bridge, Dreamweaver, etc.), but as you can guess, I like the hands-on approach.