Cal Poly Center for Teaching and Learning

This is another really cool feature of iPhoto. Did I say that all of the features are cool? You can export your slideshow into HTML so that it is organized on a web page for you with thumbnails that visitors can click on and see a larger version of your prized photos. Here’s how:

1. Make a new folder on your Desktop (Command+Shift+N) and give the folder a title (e.g., Botany Photos)

2. Open iPhoto and select the photo album you wish to make into a web page. Make sure that none of the photos are selected. If photos are selected, you can turn them off by choosing Edit > Select None. If you happen to have a few photos selected, you’ll have an HTML page of only the photos that are selected in the album so it is important to have all of them unselected to grab the entire album’s contents.

3. Go to File > Export…

4. When the Export Photos dialog box appears, click on the tab labeled Web Page.


5. In the Web Page pane, change the desired options:
   Title: Type a name for your web page and specify the number of columns and rows per page.
   Template:From the Template pull-down menu, select Framed or Plain. The choice of Framed will place a frame around your photos.
   Background color: To add a background color, click the Background button; then click the color preview box to change the color.
   Text color: To change the text color on the web page, click the Text Color button and select a color.
   

• Thumbnail: Specify the maximum dimensions in pixels for your photo thumbnails (240 is generally a good choice for both Max width and Max height).
• Click the "Show title" or "Show comment" checkbox if you want your thumbnails to have the titles or comments you gave them in iPhoto. Generally, people choose Show title for the thumbnails but turn off the Show comment option and save that for the larger photo pages.
  


• Image: Specify the maximum dimensions in pixels for your photos (640 is generally a good choice for both Max width and Max height).
  Click the "Show title" or "Show comment" checkbox if you want titles or comments to appear on your web page.
  Select Show metadata if you want the web page to show all the metadata of your camera that iPhoto collects on image imports, such as exposure settings, f-stops, etc. Unless you're a professional photographer sharing your photographic secrets, metadata is NOT generally a setting you will want to choose.

6. Click the Export button.


7. Navigate to the new folder (i.e., Botany Photos) that you created on the Desktop earlier in Step 1 above and click the OK button to save your web page contents there. By doing this, all the content for the web page is placed in one folder for easy upload to a server or to your Sites or Web folder in your .Mac account. iPhoto will create an .html file that has the same name as the new folder you previously created on the Desktop and will also generate three folders within the first folder you created containing images, pages, and thumbnails.

8. To preview your page before publishing it on a web server, drag the index.html page into your browser (e.g., Safari, Internet Explorer, or Netscape).

• Notice how the main.html page with thumbnails allows you to click on a small image and see the larger image. iPhoto has also generated web pages for the larger images (non-thumbnails), allowing for navigation to Previous or Next images with the arrow buttons on the page (not the browser arrows) or return to the main thumbnails page by hitting the Home button on the web page it created.
  
  NOTE: Be sure when you upload these files onto a web server that you upload the entire folder containing all the subfolders. Do not change its structure unless you know what you are doing or the links will be ruined.

9. To upload your new site: When you drag the index.html page into any browser, you can now upload the resultant web files folder to your web server or into Blackboard. Click here for a tutorial about placing exported web pages into blackboard.