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.


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.