Accessibility
Adobe
Sign in Privacy My Adobe

Adding dynamic images to your website using Dreamweaver

www.peachpit.com

 

Dreamweaver® doesn’t support the use of image files stored as binary data in databases—in other words, you can’t use a database that stores the actual image files. However, you can add dynamic images using information about the location of the image file on the Web server. If your database includes a field for the image location, you can add dynamic images to your pages using a recordset that contains this field.

In the following tasks, you’ll add a connection to a ColdFusion database that contains an image-location field, create a recordset in Dreamweaver that includes this field, and then add a dynamic image to a page.

We’re using ColdFusion because the Cold-Fusion MX 7 installation includes a tutorial-database with an image-location field. The process for creating a ColdFusion database connection is unique to ColdFusion, but the process of defining a recordset with an imagelocation field is the same for ColdFusion, ASP, and PHP.

Requirements

To follow along with this article, you will need the following software and files:

Dreamweaver 8

Sample file:

newartcfm.zip (ZIP, 1K)

Prerequisite knowledge:

Basic knowledge of Dreamweaver 8

Open a ColdFusion database connection

To open a ColdFusion database connection:

  1. Open a new ColdFusion page in Dreamweaver by choosing File > New > Dynamic page > ColdFusion. Save this page as newArt.cfm. If you don’t want to create the page yourself, you can download the newArt.cfm file and additional code files for this book from this book’s Web site at http://www.peachpit.com/dw.vqp. (The newArt.cfm file is also available for download at the top of this tutorial.)
  2. Create a database connection to the tutorial.mdb database included with Cold-Fusion MX 7. The tutorial.mdb file, a Microsoft Access file, is in the root folder of your Web server in the CFIDE directory (CFIDE > gettingstarted > tutorial > tutorial.mdb).
  3. After you’ve created the database connection, close the ColdFusion Administrator window and return to Dreamweaver.
  4. In the Application panel group, click the Databases tab to access the Databases panel. The new database connection (we named it cfartgallery2) will be included in the database list (Figure 1).

     

    Databases panel

    Figure 1: After you add a new ColdFusion database connection in the ColdFusion Administrator, the connection name appears in the Databases panel in Dreamweaver.

Create a recordset that includes an image-location field

To create a record set with an image-location field:

  1. Follow the steps in the previous task to add a database that contains an imagelocation field. We’ll work with that database in this exercise.
  2. Click the Bindings tab in Dreamweaver to access the Bindings panel.
  3. Click the plus button and choose Recordset (Query) from the pop-up menu to open the Recordset dialog (Figure 2).

     

    Bindings panel

    Figure 2: To define a recordset, click the plus button on the Bindings panel and select Recordset (Query) from the pop-up menu.

  4. Click the Advanced button to access the advanced Recordset dialog.
  5. In the Name field, enter newart, and in the Data Source drop-down list choose cfartgallery2 (or whatever name you gave to the database connection in the preceding task) to select this database as the source of data for the recordset (Figure 3).

     

    Recordset dialog

    (+) view larger

    Figure 3: In the Recordset dialog, enter a name for the recordset in the Name field and select a database name from the Data Source dropdown list.

  6. In the Database Items section, click the plus button to the left of Tables to expand the list of Tables in the cfartgallery2 database. Then click the plus button to the left of ART to access the ART table fields (Figure 4).

     

    Database Items section

    Figure 4: In the Database Items section, click the plus button to expand the Tables list, and then click the plus button to expand the ART table. Select the LARGEIMAGE field.

  7. Select the LARGEIMAGE field and click the SELECT button to add this table field to the SQL statement. The LARGEIMAGE field contains the image file location data.
  8. If you want to include dynamic text along with the image, choose more fields from the ART and ARTIST tables, which contain additional information about the artworks and the artists. Click the SELECT button to add each one to the SQL statement.
  9. From the ART table, select the ARTID field and click the ORDER BY button to sort the contents of the recordset by the ARTID value (Figure 5).

     

    select the ARTID field

    Figure 5: In the Database Items section, in the ART table, select the ARTID field. Click the ORDER BY button to sort the recordset results by the ARTID value.

  10. Click OK to save the recordset and close the advanced Recordset dialog.

Add a dynamic image to a web page

To add a dynamic image to a web page:

  1. In Design view, open the newArt.cfm page we created in Step 1 of “To add a ColdFusion database connection.”
  2. Place the insertion point where you want the image to appear, and then from the main menu bar, choose Insert > Image. The Select Image Source dialog appears (Figure 6).

     

    Select Image Source dialog

    (+) view larger

    Figure 6: The Select Image Source dialog

  3. In the Select File Name From section, choose the Data Sources radio button. The newart recordset we created in the previous task appears in the Field area. Click the plus button to expand the recordset (Figure 7).

     

    newart recordset

    (+) view larger

    Figure 7: The newart recordset

  4. Select the LARGEIMAGE field. ColdFusion Markup Language (CFML) for the LARGEIMAGE field (<cfoutput>#newart.LARGEIMAGE#</cfoutput>), which provides a dynamic value for the image location, is added to the URL field at the bottom of the dialog (Figure 7).
  5. Because the images are located in a folder named images, you need to append images/ to the cfoutput tag so that the URL for the image location is correct (Figure 8). Otherwise, the dynamic images won’t appear when the page is viewed in a browser.

     

    Modify the code in the URL field

    Figure 8: Modify the code in the Figure 8: Modify the code in the URL field so that the image location is correct. so that the image location is correct.

  6. Click OK to add a placeholder to the page and close the Select Image Source dialog. Next, we’ll add some text to accompany the image.
  7. In the Application panel group, click the Bindings tab to access the Bindings panel. Click the plus button to the left of the newart recordset to expand it.
  8. Select any field, and click the Insert button at the bottom of the panel to add dynamic text to the page. In our case, we’re adding the ARTNAME, DESCRIPTION, FIRSTNAME, and LASTNAME fields. You can include additional text and page formatting if you wish.
  9. Save the page. From the main menu, choose File > Preview in Browser to view the page in your browser. Figure 9 shows our newArt.cfm page in Microsoft Internet Explorer.

     

    Previewing

    Figure 9: Previewing a page with a dynamic image and dynamic text.

Tip: Only the data from the first record in the recordset displays on the newArt.cfm page. You can view all the records one page at a time by adding a Recordset Paging server behavior to create recordset navigation links, or view all the records on a single page by adding a Repeat Region server behavior.

Where to go from here

For more information about setting up a Dreamweaver site, check out the following resources: