PI8 Web Album

Web albums are a nice way to catalog a large collection of photos online. Making a web album in PI8 is super easy. All you have to do is select source photos and a layout, and the HTML web album is created for you automatically. In this tutorial I've made this this web album featuring handmade soaps from my Sea Sprite Soap site.

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, Template Library Slide Show, Image Map, Web Page Edited With FrontPage, Vertical Scrolling Text and Images, CSS Fixed Background Scrolling Text, Customizing a Web Page Template, Link Object Web Page, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

To create a web album, choose File, Export, Web Album. Doing so opens the Select Image dialog box. Note that you can select all image file types or specific ones only from the Type dropdown list. "Include all subfolders" is the default; deselect to pick only certain images for the web album.

Note that the first page of the web album will be called "index.html" -- be careful with this. If you upload the web album to your main directory, it will overwrite your current index.html page. It's a good idea to make a folder especially for your web album on your server. If you don't, change the File Name to something else.

Click the Browse button to find the Source image folder and you'll get the Browse for Folder dialog box. Browse to and select the source folder and click OK. You'll be returned to the Select Image dialog box. Click OK to open the Export to Web Album dialog box, which opens at the Output tab. Under "Output options" browse to and select a folder to which the web album will be saved. By default, "Save as web pages" and "Launch default browser to view pages when finished" are selected, but you could save the web album as a self-extracting file or burn the web album to a CD. Click the Reorder button to drag the thumbnails in the Web Album Reorder dialog box, if you wish to change the order of the images.

Click the Page Setup tab next and select options for the web album display, including page title, Heading and Footer, Page numbers and method of linking between pages.

Note that you can format Heading and Footer text by clicking the Format buttons. This will open the Text Format dialog box, where you can edit Font, font size and color, style and alignment.

Note also that you can edit the web page background and link colors by clicking the Advanced button at the bottom of the Page Setup dialog box. Doing so opens the Advanced Page Setting dialog box, from which you can choose a background color or image, an audio file and edit text and link colors. This is where you can be really creative in personalizing the look of your web album.

Click OK to close the Advanced Page Settings dialog box. Click the Thumbnails tab to choose a layout. If you want to show the thumbnails in a separate frame, select "Show thumbnail in frame." Otherwise, each image will open in a new browser window. Edit thumbnail background color and layout (columns, rows) and other options as desired.

Click the Image tab to limit image viewing size or resize images, select a JPEG compression quality ratio or add a border to the full size images.

Click the Description tab to choose information which will be displayed for each image, and a Text thumbnail layout method. Click the Format button to edit font, font size and color, etc. for the displayed fields.

Now that you've made all of your choices for the web album, it's time to check it out before you commit to saving it. Click the Preview button to view the web album in your default browser. If there's anything wrong, close the browser and go back to fix the web album as needed. When you're ready to save it, click OK.

If you want to burn the web album to a CD, click the Burn CD button. Put a CD in your CD burner and choose options in the Write Web Album CD dialog box. PI8 will create a CD that Autostarts for you.

If you're going to display your web album online, it is necessary to FTP it to your server. If you look in the folder to which you saved the web album, you'll see a number of HTML files and folders created during the save.

For your web album to display properly online, the file structure on your server must mirror this file structure exactly. That means you must make subfolders within the folder to which you upload the HTML pages, and these subfolders must be named BgImage, Images, Thumbs, BgMuisc and page. The folder names are case sensitive and you have to spell "BgMuisc" the way it is shown above. If everything doesn't match exactly, your web album will not display properly.

Take a look at the East of the Sun Soapworks Web Album.

This tutorial uploaded 11/15/02

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