Creating Lazy Portfolios in iPhoto

Stephen Turbek16 March 2013

Problem Statement

Let's say you want to create a portfolio site from images you have in iPhoto, but you are lazy and the web output option was not nice enough for you. (I'm speaking hypothetically here.) Hand coding pages and creating thumbnails is tiresome, as is updating the whole thing when you add photos.

Fortunately, you have an image management system, iPhoto, which allows you to create an album of images, name and describe them.

See a sample portfolio

This portfolio written in HTML, CSS, and JavaScript (no server code), takes the images output from iPhoto "Export album as web page" and creates a portfolio page, with nicer formatted images, and a click-through functionality. Editing the portfolio is as simple as re-exporting the set of photos.

Download Zipped sample portfolio here

To Use

  1. In iPhoto, select the images you want to use (create an album), organize them in the correct order and select "export" > "web page".
  2. Set the columns and rows to high enough numbers to get them all on one page. This will serve as the data file for the script.
  3. In the Thumbnail section of the export window, I suggest you use a small enough size to fit (100 x 100).
  4. Select "show title" and "show description" checkboxes (these will be read in by the script).
  5. In "image" section, set max width as 700px or smaller (or edit "iphoto_portfolio.css" to make the page bigger)
  6. Export into a folder inside the "iphoto_portfolio" folder, where ever you put it.