#! /usr/bin/env python # coding: utf-8 usage = """Usage: ./make_table.py image_sizes descrip > 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. image_sizes looks like: IMG_0256.jpg 2048 1536 IMG_0256_lg.jpg 1200 900 IMG_0256_med.jpg 800 600 IMG_0256_thumb.jpg 200 150 descrip looks like: 100_2455 h Driving down Miller Hill 100_2549 v Storage shed next to the red cabin This script Copyright © 2010, Christopher Swingley, and licensed under the terms of the GNU General Public License v3.0. Use at your own risk.""" import sys if len(sys.argv) != 3: print "Error: Two arguments (image_sizes file, descrip file) required" print print usage sys.exit(1) # Read all the image sizes image_sizes = {} with open(sys.argv[1]) as f: for line in f.readlines(): (img, width, height) = line.split() (width, height) = map(int, (width, height)) image_sizes[img] = (width, height) columns = 4 current_column = 1 print """ Cabin renovation, Summer 2010

Cabin renovation, Summer 2010

Part of our acquisition of the 40 acres adjacent to our house was a rental cabin, built elsewhere in the 70s and moved onto the lot. We took advantage of it being empty to renovate the interior and fix some of the larger issues. Here are some photos, first of the original interior taken in January 2010, and then a series of photos taken during the renovation in July and August 2010.

""" with open(sys.argv[2]) as f: for line in f.readlines(): 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 size = 'width="%s" height="%s"' % (image_sizes["%s_thumb.jpg" % image_base]) 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.

Because the images aren't all the same size initially, the scripts that generate the web pages need to know what the final dimensions of all the images are:

$ for i in `/bin/ls *.jpg`; do jpeginfo $i | awk '{print $1, $2, $4;}'; done > image_sizes

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

$ ./make_table.py images_sizes descrip > index.html

Finally, run make_individual_html.py:

$ ./make_individual_html.py images_sizes descrip

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.