PI6 Web Album

If you like to share your photos online with friends, consider the new Web Album feature, which automatically creates thumbnails and links them to the full size images. Select a framed or unframed page layout. Save the album as an HTML web page, or as a self-extracting .EXE file that you can send as an email attachment. 

View PI6 Web Album

This tutorial utilizes 5 digital photos I took during a walk on the beach a few mornings ago. All of the photos were greatly reduced in size to speed things up. You cannot use images less than 256 pixels wide or high in an album, so plan accordingly. Your images do not have to be all the same size, but it makes your album look more polished if the images are of a uniform size. There's a couple of important facts about the HTML code generated by Web Album that you should know at the bottom of this page, too.

To begin, put all of the images for the slide show into their own folder, if they aren't in one already. Then choose File, Export, Web Album to open the Select Image dialog box. 

Select Images

Browse to the folder containing the album images. Since mine are all .BMP files, I've selected .BMP from the Type dropdown list. Deselect "Include all subfolders" if you don't want to include images in subfolders.

Click OK to open the Export to Web Album dialog box. You will specify the attributes of the Web Album from the four tabs in the dialog box, starting with the Output tab. For the Output folder, select the same folder that contains the images. By default, it will be named index.html. This index.html will replace your real home page if you don't change the name, so be careful here and change the name to something else, like album.html,  if you're uploading to your main directory. Leave the defaults of "Save as web pages" and "Launch default browser to view pages when finished" selected.

Output tab

Click on the Page Setup tab next. Here's where you can change the default heading and footer for the album pages. Select a page numbering method, and for "Links between pages" select an option. If you select Buttons, navigation buttons will be generated for the album automatically.

Page Setup tab

Note the Format buttons next to the heading and footer boxes. Click on the heading Format button to edit font, size, style, alignment and color. I'm going with the default of Arial, but I've changed the size to 2. The default font size of 4 is too large, in my opinion. I've changed the color to navy. Click OK to close the box. Repeat for the footer text too, if desired.

Text Format box

At the bottom of the Page Setup tab, click Advanced to open the Advanced Page Settings box, from which you may edit HTML page properties. I'm going with the default of a white page background, but I've changed the text and link colors to shades of blue and green. You'll see that you can select an image file for the page background too. If you wish to include a music file with the album, browse to the file and select it. Click OK to close the box.

Advanced Page Settings dialog box

Click on the Thumbnails tab next. If "Show thumbnail in frame" is selected, the album will be set up in frames. If that option is deselected, clicking on a thumbnail displays the full size image on a separate web page. Choose whichever layout looks best to you. I've chosen a framed layout with the thumbnails at the top. I'm leaving the default of 5 columns and thumbnail size of 80 X 80. Add Index numbers if you want them included, and select an Alignment from the dropdown list.

Thumbnails tab 

Click the Image tab next. In the "Image size" section, you'll have to make some choices. If you are using digital photos, which can be very large (mine are 1600 X 1200 pixels), you will probably want to limit the viewing size of the images. If you're using very large images, select this option and pick a Width and Height in pixels for the viewing size. My images are all 500 X 375 pixels and I want them to be viewed at that size, so I've limited their viewing size to those dimensions. Again, if the original images are quite large, you will want to select "Resize image." However, if your images are smaller than the Width and Height you've chosen, don't select "Resize image" -- doing so will blow your images way up and they probably won't look good. In the "Image File Format Options" section select a JPEG compression level. I've selected 85%, which provides a reasonable balance between image quality and file size.

Image tab

Finally, click on the Description tab. "Show description," if selected, lets you display information about each image. If you don't want to display this information, deselect "Show description." 

Description tab

If you want to show this information and wish to format the text, click the Format button. Doing so opens the Text Format box again, from which you can edit the text descriptions. Note that the Alignment option is grayed out, however. Click OK to close the Text Format box.

Text Format for Descriptions

Now that you've selected all of the attributes for the Web Album, click Preview to check it out before you commit to it and save it. Your default browser will be launched to display the album. Click on the thumbnails or links to view the images. After viewing, close the browser. Correct anything you don't like and Preview again, if necessary. When you're satisfied with the album, click OK. PI will whirl for a few seconds as it saves the album, then your browser will open again for you to view the final version. When you're finished looking at it, close the browser.

It's instructive to take a look now at the file structure created by Web Album. In Windows Explorer, view the folder to which you've saved the album. You'll see that in addition to the original images, PI6 has created a number of HTML pages (including one for the background sound, if you used a music file), as well as three subfolders called Images, page and Thumbs.

Click on each folder to view its contents. The Images folder contains the compressed .JPG images created by the album. The page folder contains  HTML pages for the images and framed pages, if you've selected a framed presentation. The thumbs folder contains thumbnails of the larger images. These thumbnails were generated automatically by Web Album. They are named tn_image1.jpg, tn_image2.jpg, and so on.

When you upload the album to your server so it can be viewed online, it is necessary to preserve the file structure created on your hard drive. Specifically, all of the files in the album main directory must be uploaded to a main directory on your server. You must create 3 subdirectories called Images, page and Thumbs on your server, and upload the files in your local computer folders to the same folders on your server. If you do not, your web album will not work right.

Remember that you can create a self-extracting .EXE album file from this album, too. You just follow the exact same steps, but from the Output tab you would change the Output options to "Save pages in a self-extracting .EXE file" and "Send .EXE file as an email attachment when finished," if you want to send the album to someone. A word of caution here -- for security reasons, many people do not want to receive .EXE file attachments with their email. In fact, their virus scanning software may place such files in quarantine. It's always a good idea to ask the intended recipient first if you plan to send them an .EXE file, to make sure that they want to receive it.

A quirk of Web Album is that the HTML code generated includes a number of backward slanting slashes, which are not read by Netscape. That means that people who visit your site with Netscape won't see your images and will get errors. To correct that, you can open up your album in IE, do View, Source Code, and change the backward slashes to forward slashes. So that "\images\image1.jpg" is changed to "/images/image1.jpg." Then you can hit File, Save to save the changes. Alternatively, open the index.html page in your favorite HTML editor and make these corrections.

View the "My Walk Along the Beach" web album.

This tutorial uploaded 11/03/00

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage