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.
Bathroom, utility area, January 2010 med lg full |
Original kitchen med lg full |
View of entry area, living room; gap hidden by carpet med lg full |
Original view of the bedroom, January 2010 med lg full |
Ripped up carpet and a strip of subfloor, hearth med lg full |
Original subfloor, gap between buildings med lg full |
Bedroom subfloor, nasty stains med lg full |
Rotting subfloor removed med lg full |
Patched, insulated med lg full |
New subfloor in bedroom med lg full |
Rain pouring off roof med lg full |
New subfloor, shims in kitchen med lg full |
New subfloor in kitchen, dining area, living room med lg full |
Stripping vinyl flooring in entry, bathroom med lg full |
Bathroom subfloor med lg full |
New subfloor in entry, bathroom med lg full |
Support wall med lg full |
Support wall, drywalled med lg full |
Drywall patch in the bathroom med lg full |
Lots of hole patching med lg full |
New coat of primer and paint med lg full |
Structure of new hearth med lg full |
Vinyl plank flooring in entry, bathroom med lg full |
Oh hai! med lg full |
Vinyl plank flooring in kitchen med lg full |
Laminate, vinyl, beginnings of the new hearth med lg full |
Living room, kitchen, dining area; gap in structure med lg full |
Trim, oak strip to cover gap med lg full |
Northern Hawk Owl behind cabin med lg full |
Wood stove, heat shield, hearth with trim med lg full |
New overhead light in bedroom med lg full |
New vanity, faucet in bathroom med lg full |
New entry stairs med lg full |
First fire in the wood stove med lg full |
Utility pole pushed out of the ground, severly canted med lg full |
Results of burying power cable med lg full |
Straightened power pole, pair of guy wires med lg full |
Gravel to repair driveway area med lg full |
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.