Take Your Web Site to New Levels

Display Images in Your FrontPage DRW Page

One of the most common questions on FrontPage discussion forums has to do with displaying images based on database records. It's very easy to display data, but very often, as in a product catalog, you need to display images with each product record.

What's unique about this tutorial? I'll also show you a simple technique to make your images clickable so that they bring up a larger version to show more details. If you're going to do a little FrontPage magic, you might as well go all the way.

There are six steps to this tutorial

Step 1. Create the Image Files
Step 2. Create or Modify the Database
Step 3. Create the Basic Details Page
Step 4. Adding Photos From Your Database
Step 5. Hyperlink to a page showing a larger image
Step 6. Now Lets Make It Look Pretty
Step 7. Don't Forget the Alt Text

Step 1. Create the Image Files

Like everything in your website, you need to create your image files. For this example, create two versions of each image: one to display on your initial DRW page and the second to display on the enlarged image page.

Place the first in your images directory, and the second (with the exact same name) in a subdirectory called images/large.

It's important that the images be given the exact same name, just placed into a subdirectory. This will make it easy to display the second (larger) image.

Now create a simple blank gif and call it "blank.gif". Place one copy in both the images and images/large directory. Right click the following link and select "Save Target As" to download a copy of blank.gif. Keep in mind that if you left click on it you will only see a blank page (since this image is transparent it is invisible).

blank.gif

Step 2. Create or Modify the Database

If you don't already have a database that you are using, create a new database in MS Access. Here are a few tips.

1. Add an autonumber field to use as a key. Call it ProductID. Always use an autonumber field for your key. If you make the error of using the product name as your key, you can run into problems if you later change the name of the product, especially if you have several linked tables. An autonumber never changes, and always is unique - the perfect key.
2. Add fields for several names. In my case, I created fields named PhotoName1, PhotoName2, PhotoName3 and PhotoName4. Don't forget to set the default value for each to "blank.gif". This will make sure your database always has an image to display, even if it is the transparent image blank.gif. This will avoid getting the unsightly X symbol displayed by Internet Explorer when it cannot find an image to display.
3. Add caption fields for each with corresponding names such as PhotoCaption1, PhotoCaption2, PhotoCaption3 and PhotoCaption4.
4. Add copyright fields for each with corresponding names such as Photo1Copyright, Photo2Copyright, Photo3Copyright and Photo4Copyright.
5. Add any additional fields you may need.

Here is a screen shot of a sample database table that I created for this tutorial:

Step 3. Create the Basic Details Page

Once you have a database connection to your database, you are ready to create the product display page.

On a blank page, insert a DRW and select all the fields. In step 4, select "list - one field per item" and in step 5, select "Split Records into groups of 1" . Your DRW fields will look something like the following example.

ProductID: <<ProductID>>

ProductName: <<ProductName>>

PhotoName1: <<PhotoName1>>

PhotoName2: <<PhotoName2>>

PhotoName3: <<PhotoName3>>

PhotoName4: <<PhotoName4>>

PhotoCaption1: <<PhotoCaption1>>

PhotoCaption2: <<PhotoCaption2>>

PhotoCaption3: <<PhotoCaption3>>

PhotoCaption4: <<PhotoCaption4>>

Photo1Copyright: <<Photo1Copyright>>

Photo2Copyright: <<Photo2Copyright>>

Photo3Copyright: <<Photo3Copyright>>

Photo4Copyright: <<Photo5Copyright>>

ProductDescription: <<ProductDescription>>

Check it out here

Step 4. Adding Photos From Your Database

Unfortunately with this DRW, the images don't display. That's where the FrontPage Magic comes in.

Delete the fields <<PhotoName1>>, <<PhotoName2>>, <<PhotoName3>> and <<PhotoName4>>

Now beside each field insert a photograph from the same directory that you are storing your images. It doesn't matter what the image is, because we are just creating a temporary placeholder here.

Your first few fields will now look like this:

ProductID: <<ProductID>>

ProductName: <<ProductName>>

PhotoName1: 

PhotoName2: 

Doesn't look like much does it?

Now it's time to change the image so that it displays a changing image for each database record. Right click on the image placed beside PhotoName1 and select "Picture Properties". Click the General tab and It will look like the following image:

Click on Parameters to open the following dialog

Delete the current path and select Insert Field Value. This button is grayed out until you clear the current path. When you click on the Inset Field Value button, you'll see a drop-down list of field names, select PhotoName1 as the field name. It will now look like the following:

Now, because we have placed the images into a subdirectory called images, we need to change the path slightly to make this field path look to the correct directory.

In the field path, change:

<%=FP_FieldLink(fp_rs,"PhotoName1")%>

to

images/<%=FP_FieldLink(fp_rs,"PhotoName1")%>

Your Parameters Screen will now look like this:

When you click OK twice to close these dialogs, you'll notice that something terrible appears to have happened. The photo has been replaced by a horrible icon that looks like the following:

Don't panic. When you view the asp page on the web, the red x will be replaced by the actual image for your database.

Check it out here

Now, do the same with the other three Photo Properties. When you preview the pages, you'll notice that nothing appears beside the PhotoName2 and PhotoName3 Fields. That is because they are showing the default image blank.gif.

In the case of PhotoName4 on the first record, it shows a red x because I did not enter the default value blank.gif into the database field. I did this to illustrate the importance of having a default image name such as blank.gif. It makes sure you never see the dreaded red x.

Step 5. Hyperlink to a page showing a larger image

Create another blank page and call it LargeImage1.asp. Insert a DRW and insert only the following fields:

ProductID: <<ProductID>>

ProductName: <<ProductName>>

PhotoName1: <<PhotoName1>>

PhotoCaption1: <<PhotoCaption1>>

Photo1Copyright: <<Photo1Copyright>>

ProductDescription: <<ProductDescription>>

Create 3 more pages, one for each of PhotoName2, 3 and 4 and name them LargeImage2.asp, LargeImage3.asp and LargeImage4.asp

For each page, go through the same process to change the PhotoName1 field so that it will display an image. In this case, though the field path should look like the following:

images/large/<%=FP_FieldLink(fp_rs,"PhotoName1")%>

You'll notice that the path was changed from images/ to images/large/. This makes it point to the larger version of the image with the same name.

Now, go back to the Product Details Page, click on the PhotoName1 image placeholder (the red x) and select insert Hyperlink. Direct the link to LargeImage1.asp.

Now click on the Parameters window and select Add. Select ProductID from the list of Parameters. Now close the hyperlink window, and you are ready to go. Now, whenever you click on any of the images, they will link to a larger image.

Check it out here

Step 6. Now Lets Make It Look Pretty

Now that you've got it working, why not add some fancy formatting to make it all look presentable.

Everything within the DRW header and footer can be formatted. You can edit the appearance of the fields, place them within tables to help format them, and do all manner of visual appeal. Quite often, the field labels can be removed to add a better visual appeal.

Here is one way of reformatting this sample page.

Check it out here

Step 7. Let's Add Some Alt Tags to the Images

One of the most important aspects of using images in websites is the addition of Alternate (Alt) text. This allows you to add descriptive text to an image. For visually impaired users this is critical since they can at least have access to the text description. How do we do this since the images constantly change, along with potential caption text.

In this example, there are two things that may change with each image, the image caption and the copyright holder of the image. To solve the problem, we just add a little code to the image properties.

Right click on the image and select properties. Then click on the General tab.

In the Text field type the following:

<%=FP_FieldVAL(fp_rs,"PhotoCaption1")%> - Photo Copyright <%=FP_FieldVAL(fp_rs,"Photo1Copyright")%> - Click for a larger version

This will tell the image to display the following:

<<PhotoCaption1>> - Photo Copyright <<Photo1Copyright>> - Click for a larger version

This will be translated into the following:

Blue Jay - Photo Copyright Ward Cameron 2003 - Click for a larger version

Now you're ready to go.

Your Picture Properties window will now look like the following:

Check it out here