Making a Photo Gallery
 
Sunday, February 09, 2003  

When I have a group of photos that I want to post, I find inserting each image into CityDesk and then inserting each image into an Article to be a pain. The solution for me is to put a homepage in CD and then process the bulk of images outside of CD.

The basic process is:

  1. Generate thumbnails, thumbnail page, and individual display pages in Gallery Wizard
  2. Modify a page banner in PaintShopPro
  3. Create a homepage in CD and link it to the thumbnail page
  4. Publish CD and ftp the thumbnails, etc. to the server

I wrote this tutorial mostly as a reminder to me, so the directory paths are specific to my system.

I'm running Win2k Pro with IIS for local testing and local publishing. My root directory for IIS is d:\SattSite. I then push out to my public web server.
My photos are in a separate CD site from my main site. The root for the photo site is d:\SattSite\photos
Index page for the galleries is d:\SattSite\photos\collections.html
The logo/banner graphic satt01.gif is 588 x 83 pixels
Here's satt01.html and both satt01.inc and satt01.css

  1. Make folder [newfolder] under d:\SattSite\photos\collections
  2. Put images in folder.
    1. Image size max width = 600, max hieght = 400
    2. Meaningful file names. These display as captions on the individual display pages
  3. Open Gallery Wizard
    1. Source File tab: select images from newfolder. Use the arrows to order images if desired.
    2. Thumbnail options:
      • 120 x 120 x 75
      • Keep aspect ratio
      • Filename prefix: th_
      • NO copy source images
    3. Input options: select as appropriate based on image file type
    4. Output options
      • Destination directory: d:\SattSite\photos\collections\newfolder
      • Template: satt01.html -- 3 x 3  (If there are fewer images than the max number of thumbnails on a page, the bottom nav links won't display.
      • Page basename: page
      • Page title: Newfolder Gallery Page #<%PAGE%>
      • Home link: ../../collection.html
    5. Image Page
      • YES create html page for each image
      • Page Code: copy the contents of satt01.inc from d:\Program Files\Gallery Wizard\Templates into the text box
    6. Click Go
  4. From d:\Program Files\Gallery Wizard\Templates
    1. Copy satt01.css into d:\SattSite\photos\collections\newfolder
    2. Open satt01.gif in PaintShopPro. Add reference to Newfolder in the banner.
    3. Save as satt01.gif to d:\SattSite\photos\collections\newfolder
    4. At this point, you could import eveything into CD, but I see no real need.
  5. Under the collections folder in the sattphoto.cty site:
    1. Insert one of the horizontal thumbnails from newfolder. Rename it newfolder.jpg.
    2. Add a new Article. Name it newfolder.
      • Body: description plus relative link to newfolder/page1.htm.
      • Body (HTML tab): if no description, javascript redirect to newfolder/page1.htm.
      <SCRIPT LANGUAGE="JavaScript">
      <!-- Begin
      window.location="subway/page1.htm";
      // End -->
      </script>
      <noscript>
      You should be redirected automatically. If not, click <a href="newfolder/page1.htm">here</a>.
      </noscript>
      • Teaser: for the collections index page
      • Extra1: thumbnail magic name
      • Extra2: year
  6. FTP newfolder up to the server.
  7. Publish CityDesk to the server.