Section 9.2. Publishing Photos on the Web | iPhoto 6: The Missing Manual

9.2. Publishing Photos on the Web

Putting your photos on the Web is the ultimate way to share them with the world. If the idea of enabling the vast throngs of the Internet-using public to browse, view, download, save, and print your photos sounds appealing, read on. It's amazingly easy to get your photos from iPhoto to the Internet.

9.2.1. Three Roads to Webdom

iPhoto actually provides three different Web- publishing routes.

The easiest , most hands-off approach : Use iWeb, one of the other iLife '06 programs. iPhoto can hand off any batch of photos to iWeb with only a couple of mouse clicks; from there, you can post them online with a single command.

What's especially nice about the resulting Web page is that it presents a tidy collection of thumbnail imagesa gallery that downloads relatively quickly into your audience's browsers. Then, when visitors click one of the thumbnails, a new window opens up to display the picture at full size (see Figure 9-2).

Note: This two-click business is available only if you have a .Mac account. That's Apple's suite of Internet services: email accounts, secure file backup, Web-site hosting, and a few other extras. If you don't already have a .Mac account, see the "Getting a .Mac Account" box in Section 9.2.2. Follow the directions, and you'll have one in less than five minutes. (A .Mac membership costs $100 per year; a two-month trial account is free.)You can still use iWeb to create photo-gallery Web sites if you don't have a .Mac account; see Section 9.2.2.1. It just takes a few additional steps.
More effort, more design and layout options : Copy photos from iPhoto to the Pictures folder of your iDisk (an Internet-based "virtual hard drive" that comes with a .Mac account). Then use the HomePage features at Apple's Web site (instead of the layout tools in iPhoto) to set up your pages.
For the experienced Web page designer : If you already have a Web site, you can use either of two approaches to generate Web pages (HTML documents): either the Export command or the new Send to iWeb command. You can upload these files, with the accompanying graphics, to your Web site, whether that's a .Mac account or any other Web-hosting service. (Most Internet accounts, including those provided by AOL and Earthlink, come with free space for Web pages uploaded in this way.)

This is the most labor- intensive route, but it offers much more flexibility if you know how to work with HTML to create more sophisticated pages. It's also the route you should take if you hope to incorporate the resulting photo gallery into an existing Web site (that is, one in which the photos aren't the only attraction).

All of these methods are detailed in the following pages.

9.2.2. Method 1: Use iWeb

Web publishing doesn't get any easier than it is with iWeb. Your photos end up on a handsome-looking Web page in just a few quick stepsand you don't have to know the first thing about HTML.

Figure 9-2. You'd be nuts to stuff your full-size pictures onto the Web. The 70 percent of the population who uses dial-up modems would come after you with a lynch mob.
Top: Fortunately, iWeb adopts a respectful approach: It uploads only a gallery of smallish thumbnails. When visitors click one of them, a larger version of it opens in a separate window.
Bottom: Best of all, though, is the Start Slideshow button. It offers a big-screen version of the photo. A set of navigation buttons fades in when your mouse moves near the bottom of the window; navigation thumbnails fade into view when your mouse approaches the top of the window. Cool.
All of this takes a lot of time to load, though, even with a high-speed Internet connection. If it winds up causing too many headaches for your audience, consider adopting one of the other Web-publishing approaches described in this chapter.

In iPhoto, select the photos you want to put on the Web, or click the album that contains them .

The selection can be one you've dragged pictures into, a smart album, the Last Roll(s) album, a year album, and so on. Or use the selection techniques described in Section 5.3.1 to isolate a bunch of photos within an album.

Note: The iWeb photo-gallery template can't handle more than 99 photos per Web page. If you want to "publish" more than that, you'll have to create a series of separate pages.

Choose Photos Send to iWeb Photo Page (or, if the iWeb button appears on the toolbar at the bottom of the screen, choose Photo Page from its pop-up menu) .

If you choose Photos Send to iWeb Blog instead, youll create a different sort of Web pagenot so much an art gallery as a daily journal page, with spaces where you can type up comments about your pictures. The steps are exactly the same as described here, except that you should begin by selecting, at most, three photos.

UP TO SPEED
Getting a .Mac Account

.Mac, Apple's subscription online service, provides everything you need to put a collection of your photos onlineand on your network. Unfortunately, the service isn't free (as it was when it was called iTools and didn't include as many features). A .Mac membership will set you back $100 per year.

The good news is that Mac OS X makes it incredibly easy to sign up for an account, and a two-month trial account is free. (There are a few limitations on the trial account; it grants you 20 MB of iDisk space instead of 125 MB, for example.) If you don't already have an account, here's how you get one:

Choose System Preferences. When you click the Internet icon, the .Mac tab is staring you in the face. Click Sign Up.

Now you go online, where your Web browser opens up to the .Mac sign-up screen. Fill in your name and address, make up an account name and password, and, if you like, turn off the checkbox that invites you to receive junk mail.

You're also asked to make up a question and answer (such as, "First grade teacher's name?" and "Flanders"). If you ever forget your password, the .Mac software will help youprovided you can answer this question correctly. Click Continue.

An account summary screen now appears; print it or save it. On the next screen, the system offers to send an email message to your friends letting them know about your new email address (which is whatever-name-youchose@mac.com ).

The final step is to return to the Internet pane of System Preferences. On the .Mac tab, fill in the account name and password you just composed . You're now ready to use your .Mac account.

After a moment, iWeb appears.

Choose a background design, either black or white .

The window immediately displays a mock-up of your finished Web page (Figure 9-3), displaying the thumbnails in whatever order they appeared in iPhoto.

Figure 9-3. In iWeb, iPhoto shows you what your yet-to-bepublished Web page is going to look like.
To adjust the layout, click the Inspector button ( ) at the bottom of the window. In the Inspector palette (shown at left), click the third icon from the right to view the Layout options. (If they don't appear, make sure you've clicked the thumbnail area so it's highlighted.)
Edit the page title, subtitle , and individual photo titles .

Don't be concerned by the presence of all the Latin ("Lorem ipsum dolor amet"); that's intended to be placeholder text. Drag your cursor through it and type new stuff to replace it.

If you don't bother changing the photo names , iPhoto will simply use whatever titles the photos have in the program itself.
Edit the design of the photo grid, if you like .

Click the Inspector button at the bottom of the window. As shown in Figure 9-3, clicking its fifth tab opens up a palette of photo-grid options. You can control whether it's a two- or three-column grid, how tall the caption boxes are, whether you want an outline around the grid, and so on.
Click the Publish button (shown at lower left in Figure 9-3) .

This is the big moment: iPhoto connects to the .Mac Web site, scales down your photos to a reasonable size, and then transfers them to the server. This magic requires, of course, that you already have a .Mac account, and that you've entered your account name and password as described in Section 9.2.2. It can also take a very long time.

When the uploading process is complete, as indicated by the alert dialog box (Figure 9-4, bottom), you can go to the page and see your results.

Note: You don't have to have a .Mac account to use iWeb. If you maintain your own Web site, for example, choose File

"Publish to a Folder in this step. You wind up with a folder of correctly linked HTML documents and images folders on your hard drive. All you have to do is upload them manually to your Web site, as described in Section 9.2.4.3.

Figure 9-4. You can see your finished page on the Web by clicking Visit Site Now, but pay heed to the URL listed above the buttons; that's the Web address you need to give out if you want others to visit the page. (You can drag across it to copy it.)

If you include larger photos in your Web page, iPhoto automatically scales them down to reasonably sized JPEG files, so that they can be more easily loaded and displayed in a Web browser. If you want your Web pages to include exact copies of your original photosregardless of size or file formatyou must copy them to your iDisk yourself and then use the online HomePage tools to create your Web pages, as described later in this chapter. Or use the "Export Web Pages" option described in Section 9.2.4.

9.2.2.1. What you get when you're done

When you see what you've created with iWeb, you'll be impressed: It's a professional-looking, stylishly titled Web page with thumbnails neatly arranged in a grid. Clicking a thumbnail opens an enlarged version of the picture in its own window; clicking the Start Slideshow button creates a full-window, beautiful slideshow complete with Previous and Next buttons and, when the cursor moves to the top of the window, even a little thumbnail browser (Figure 9-2). You can return to your main index page at any time by closing the slideshow window.

Tip: In the URLs for your .Mac-hosted Web sites (such as http://web.mac.com/casey/iWeb/Site/Summertime.html), capitalization countsa point not to be forgotten when you share the site's address with friends. If you type one of these addresses into a Web browser with incorrect capitalization, you'll get only a "missing page" message.Then again, maybe it's better to send your friends a much shorter, easier to remember address. You can convert long URLs into shorter ones using a free URL redirection service. At www.tinyurl.com, for example, you can sign up to turn http://web.mac.com/gladys/iWeb/Site/pickles.html into http://tinyurl.com/bus4. (Or do your own shopping for similar services by searching Google for "free URL redirection.")

9.2.2.2. Editing or deleting the Web page

Within iWeb, make your changes (delete photos or add them using the Media Browser, rearrange them, rename them, and so on) and then click the Publish button again at the bottom of the screen. iWeb sets about updating the gallery online.

To delete a photo-gallery page, click its name in iWeb's left-side panel (the Site Organizer) and press the Delete key. Then click Publish at the bottom of the window (meaning, "OK, make the online version of my site match what I now have in iWeb").

Deleting a photo page like this also deletes all of the online photo files, which frees up space on your iDisk.

9.2.3. Method 2: Use .Mac's HomePage Feature

Although using iWeb is incredibly simple, it entails a lot of sitting and waiting for the program to compute and upload things. You don't have much freedom of design, either: it's black or white, and that's it. HTML aficionados complain, too, that iWeb's behind-the-scenes HTML code is bloated and a tad unorthodox.

Fortunately, there's another way to go about creating, editing, and managing your photo galleries online: visit your .Mac Web site (Figure 9-5). The advantage here is that you can make changes to your photo gallery even when you're far from home, using any Web-connected computer. As a bonus, Apple offers templates that lets you use your photos in Web pages that aren't photo-gallery designsthere's a nice baby announcement page, for example.

FREQUENTLY ASKED QUESTION
Where Did All the Photos Go?

When iWeb transfers my photos to the .Mac Web site, where are they going ?

Everything gets stored on your iDisk, the virtual disk that comes with your .Mac account. (Your iDisk looks and behaves like a miniature hard drive, but it's really just a privately reserved chunk of space on one of Apple's secure servers.)

The HTML pages generated by iWeb automatically go in the Web Sites iWeb folder on your iDisk. (In fact, if you know how to use a Web page creation program like Dreamweaver, you can make changes to your Web pages by editing these documents.)

The photos themselves get dumped into folders called Images within that iWeb folder on the iDisk.

Figure 9-5. Top: Deleting a Web page is easy once you've signed onto the .Mac HomePage Web site. Click the name of the page you want to delete, and then click the Delete button. When asked, "Are you sure?" click Yes.
Bottom: After making changes to your photos or their names, you can republish the site right from inside iPhoto.

To get started with HomePage, you first must copy the photos you want to publish from iPhoto to the Pictures folder of your iDiskin fact, into a new folder in the Pictures folder, one folder per Web page. (If your iDisk isn't already onscreen, just choose Go iDisk My iDisk in the Finder, so that its icon appears on your desktop.) You can drag thumbnails directly out of iPhoto and into the Pictures folder on the iDisk.

Once your photos are in the iDisk's Pictures folder, you're ready to create your Web pages. Go to www.mac.com , sign in, click the HomePage button, then click one of the "Create a page" tabs on the HomePage screen to view the styles of pages you can create. Some of the formatting options available are shown in Figure 9-6.

Figure 9-6. Your Web-publishing options multiply considerably once you hit HomePage. In addition to the photo album themes shown here, you can also create rsums, personal newsletters, baby announcements, and party invitations. You can find these other options by clicking the "Create a page" tabs along the left side of the screen in the main HomePage screen.

The first tab, Photo Album, offers photo-gallery layouts in a far wider range of styles than iWeb offers. But you're free to use your photos in the other Web page designs here, too, like the baby announcements, writing samples, invitations, and so on.

If you choose Photo Album, click the miniature image of the design you want. HomePage next asks which photos folder in your Pictures folder you want to place on your new Web page, as shown in Figure 9-7. Select a folder of pictures, and then click Choose. After a few moments, your new photo album page appears with photos already inserted in the appropriate spots.

Figure 9-7. Tell HomePage which photos to use. Two things to remember here: First, the pictures you choose must be in the Pictures folder of your iDisk, or HomePage won't see them; second, you can only choose a folder, not individual files. To include specific photos on a page, put them into a folder of their own in your Pictures folder before you start building the page.

(If you choose any other Web page design, like Baby, the routine is pretty much the same, except that you have to click Edit at the top of the page in order to choose the photos you want.)

To finish the project, click Edit at the top of the page to change the chunks of dummy text on the page. (Make an effort to avoid misspellings and typos, unless you want an audience of 400 million to think you slept through fourth-grade English.)

Finally, click Preview to see how the Web page will look. When everything is just the way you want it, click Publish. The page goes live, as indicated by the confirmation dialog box shown at the bottom of Figure 9-4.

Tip: You can create as many Web pages as your iDisk will hold, by the way. When you return to the main HomePage screen, a list of your existing Web pages appears, complete with New Page, Edit Page, and Delete Page buttons.

POWER USERS' CLINIC
Password Protection

When you publish your photos using HomePage, the pages you create become accessible to the whole Web-browsing world. Specifically, anyone with a Web browser and an Internet connection can view, and even download, your pictures.

If you don't feel comfortable sharing your photos quite so freely , you can add a password to your HomePage-generated sites, thereby controlling access to your photos. All right, you may not particularly care who sees your dog photosindeed, you may be trolling for a dog-photo agent. But if you'd rather eliminate the possibility that your boss might see your bachelor party shots, or that your husband might see shots of your old boyfriend, password-protect the page, and then distribute the password only to those who need to know.

To password-protect your site, access the screen shown in Figure 9-5. Select the name of your site from the Site list at the left side of the page, and then click the Edit button beneath it. On the "Edit your site" screen, turn on the Password On checkbox, insert the password of your choice, and then click Apply Changes.

After you've turned on password protection, anyone who comes to one of your .Mac-hosted Web pages will be prompted to enter the password (as shown here) before gaining access to your photos.

Corporations and professional Web designers may sniff at the simplicity of the result, but it takes them a lot longer than two minutes to do their thing.

9.2.4. Method 3: Export Web Pages

If you already have your own Web site, you don't need .Mac or iWeb to create an online photo album. Instead, you can use iPhoto's Export command to generate HTML pages that you can upload to any Web server. You're still saving a lot of time and effortand you still get a handy, thumbnail gallery page like that shown back in Figure 9-2.

The Web pages you export directly from iPhoto don't include any fancy designs or themed graphics. In fact, they're kind of stark; just take a look at Figure 9-11.

But they offer more flexibility than the pages made with HomePage. For example, you can specify the dimensions of thumbnails and images, and choose exactly how many thumbnails you want included on each page.

This is the best method if you plan to post the pages you create to a Web site of your ownespecially if you plan on tinkering with the resulting HTML pages yourself.

9.2.4.1. Preparing the export

Here are the basic Web exporting steps:

In iPhoto, select the photos you want to include on the Web pages ..

The Export command puts no limit on the number of photos you can export to Web pages in one burst. Select as many photos as you want; iPhoto will generate as many pages as needed to accommodate all the pictures into your specified grid.

Tip: If you don't select any photos, iPhoto assumes you want to export all the photos in the current album, including the Photo Library or Last Roll(s) album.
Choose File Export, or press Shift- -E .

The Export Photos dialog box now appears.
Click the Web Page tab .

You see the dialog box shown in Figure 9-8.
Set the Page attributes, including the title, grid size, and background .

The title you set here will appear in the title bar of each exported Web page, and as a header in the page itself.

Tip: For maximum compatibility with the world's computers and operating systems, use all lowercase letters and no spaces.

Use the Columns and Rows boxes to specify how many thumbnails you want to appear across and down your "index" page. (The little "1 page" indicator tells you how many pages this particular index gallery requires.)

Figure 9-8. As you change the size of the thumbnail grid or the size of the thumbnails, the number of pages generated to handle the images changes. The page count, based on your current settings, appears just to the right of the Rows field. The total count of the photos you're about to export appears in the lower-left corner of the window.

Figure 9-9. Left: Drag the right-side slider all the way up to see the spectrum of colors available to you. Drag downwards to view darker colors.
Right: Alternatively, click one of the other color-picking buttons at the top of the dialog box. The crayon picker delights with both ease of use and creative color names, like Banana.

If you'd like a background page color other than white, click the rectangular swatch next to the word Color, and follow the instructions in Figure 9-9. You can also pick a color for the text that appears on each page by clicking the Text Color swatch.

You can even choose a background picture instead of a solid background color. To make it so, click the Image button, and then the Set button to select the graphics file on your hard drive. Be considerate of your audience, however. A background graphic makes your pages take longer to load, and a busy background pattern can be very distracting.
Specify how big you want the thumbnail images to be, and also specify a size for the expanded images that appear when you click them .

The sizes iPhoto proposes are fine if all of your photos are horizontal (that is, in landscape orientation). If some are wide and some are tall, however, you're better off specifying square dimensions for both the thumbnails and the enlarged photos240 x 240 for the thumbnails and 640 x 640 for the biggies, for example.
Turn on "Show title" and "Show comment," if desired .

This option draws upon the titles you've assigned in iPhoto, centering each picture's name underneath its thumbnail. The larger version of each picture will also bear this name when it opens into its own window.

Turning on the "Show comment" option displays any text you've typed into the Comments field for each picture in iPhoto. Depending on which checkboxes you turn on, you can have the comments appear under each thumbnail, under each larger size image, or both.
Click Export .

The Save dialog box appears.
Choose a folder to hold the export files (or, by clicking New Folder, create one) and then click OK .

The export process gets under way.

9.2.4.2. Examining the results

When iPhoto is done with the export, you end up with a series of HTML documents and JPEG imagesthe building blocks of your Web-site-to-be. A number of these icons automatically inherit the name of the folder into which you've saved them. If you export the files into a folder named Tahiti, for example, you'll see something like Figure 9-10:

Tahiti.html . This is the main HTML page, containing the first thumbnails in the series that you exported. It's the home page, the index page, and the starting point for the exported pages.
Page1.html, Page2.html You see these only if you exported enough photos to require more than one page of thumbnailsthat is, if iPhoto required multiple "home" pages.
Tahiti-Thumbnails . This folder holds the actual thumbnail graphics that appear on each of the index pages.
Tahiti-Pages . This folder contains the HTML documents (named Image1.html, Image2.html, Image3.html, and so on) that open when you click the thumbnails on the index pages.
Tahiti-Images . This folder houses the larger JPEG versions of your photos. Yes, these are the graphics that appear on the Image HTML pages.

Tip: Some Web servers require that the default home page of your site be called index.html . To force your exported Web site to use this name for the main HTML page, save your exported pages into a folder called "index." Now the home page will have the correct name ( index.html ) and all the other image and page files will be properly linked to it. (After exporting, feel free to rename the folder. Naming it "index" was necessary only during the exporting process.)

Figure 9-10. This is what a Web site looks like before it's on the Internet. All the pieces are here, filed exactly where the home page (called, in this example, Tahiti.html ) can find them.

Once you've created these pages, it's up to you to figure out how to post them on the Internet where the world can see them. To do that, you'll have to upload all the exported files to a Web server, using an FTP program like the free RBrowser (available from the "Missing CD" page of www.missingmanuals.com).

Only then do they look like real Web pages, as shown in Figure 9-11.

9.2.4.3. Enhancing iPhoto's HTML

If you know how to work with HTML code, you don't have to accept the unremarkable Web pages exported by iPhoto. You're free to tear into them with a full-blown Web authoring program like Adobe GoLive, Macromedia Dreamweaver, or the free Netscape Composer (www.netscape.com) to add your own formatting, headers, footers, and other graphics. (Heck, even Microsoft Word lets you open and edit HTML Web pagesplenty of power for changing iPhoto's layout, reformatting the text, or adding your own page elements.)

If you're a hard- core HTML coder , you can also open the files in a text editor like BBEdit or even TextEdit to tweak the code directly. With a few quick changes, you can make your iPhoto-generated Web pages look more sophisticated and less generic. Some of the changes you might want to consider making include:

Change font faces and sizes.
Change the alignment of titles.
Add a footer with your contact information and email address.
Add metadata tags (keywords) in the page header , so that search engines can locate and categorize your pages.
Insert links to your other Web sites or relevant sites on the Web.

Figure 9-11. Here's what a Web page exported straight from iPhoto looks like. The no-frills design is functional, but not particularly elegant. You have no control over fonts or sizes. On the other hand, the HTML code behind this page is 100 percent editable.

If you're not an HTML coderor even if you areyou can perform many of these adjustments extremely easily with the BetterHTMLExport plug-in for iPhoto, described next.

9.2.5. Better HTML

iPhoto's Export command produces simple, serviceable Web page versions of your photo albums. Most people assume that if they want anything fancier, they need either HTML programming chops or a dedicated Web design program.

Actually, though, you can add a number of elegant features to your photo site using an excellent piece of add-on software that requires absolutely no hand coding or special editing software.

Figure 9-12. Top: BetterHTMLExport works by adding a new panel called Better Web Page to the standard Export Photos dialog box. It in turn offers panels of features for customizing the Web pages you export from iPhoto. For instance, you can have your pages display your titles and comments beneath all thumbnail images. Other gems include the "Links On Bottom" and "Links On Top" checkboxes, shown below.
Bottom: Thanks to these numbered links, your viewers won't have to keep ducking back to the index page to jump to a different photo; they'll have a row of underlined number buttons (1 2 3 4 5) to click at the top or bottom of each page. BetterHTML Export can also add the "index" link that returns you to the main thumbnail page and the Original Photo link that loads the original photo fileat full, multimega-pixel size.

It's the fittingly named BetterHTMLExport, an inexpensive iPhoto plug-in that extends the features of iPhoto's own HTML Exporter. (See Section 13.5 for more on iPhoto plug-ins.)

You can download a copy of BetterHTMLExport from the "Missing CD" page of www.missingmanuals.com, among other places. The version for iPhoto 6 is a $20 shareware program.

Here are some of the great things you can do with BetterHTMLExport:

Add comments (not just titles) on index and image pages.
Insert "Previous" and "Next" links on each individual image page, so that you can jump from picture to picture without returning to the index (thumbnail) page.
Control the JPEG quality/compression setting used to create copies of your photos.
Create links to your original images instead of just JPEG versions of them.
Choose where on the page you want to include navigation hyperlinks .

See Figure 9-12 for a quick tour of this valuable add-on.