Splash of Style...Macs, Photography, Design, and other Passions

Create Simple HTML Photo Page in iPhoto

February 1, 2009 by debbie T | ComputersDigital PhotographyiPhotoMac SoftwareWeb DesignWeb Development

I maintain a basic web site for a local non-profit, and every year, I must update their photo page of Officers. It’s always been time consuming to try to reassemble the table html codes and move all the names and titles to their appropriate spots.

I wanted to find an easier way to create a simple html table for the photo page. I looked into iWeb, but the output page looked like a portfolio, and the code was virtually impossible to edit later.

I had imported all the necessary photo files into iPhoto, and while I was checking out the Export command, I noticed there was an option to export as web page.

Create a New iPhoto Album

Create a new album in iPhoto with all the photos you want added to your exported photo page. Re-arrange the order of the photos if necessary. Add Titles and Descriptions as well.

Export as Web Page

Choose File>Export, then click on the Web Page button.

Customize the page settings, like Title, columns/rows, colors, and thumbnail/image dimensions & options.

Click the Export button.

export-as-web-page1.png

Save In a New Folder

Save the exported files in a New Folder.

save-in-a-new-folder1.png

Exported Files

Once exported, check out the files in Finder.

iPhoto created an index.html page, along with separate folders with full sized images, individual photo html pages, and thumbnail sized images.

exported-files1.png

Edit the html Files

If you are familiar with html handcoding, open the .html files and edit them easily in your text editor. The code is basic and uncluttered. So different from the crap that iWeb creates. No, iPhoto’s code is not perfect, it’s old school. For example, there is a strange stray <p> tag before the table that can be removed. But it’s easy to customize the code to your needs.

For my original project, I deleted the individual pages and full sized images, and edited the html to remove the html code for the linked pages.

To view the unedited files I exported for this article, take a look at the index.html page. From there, you can view the linked individual pages.

Commments are closed for this article.