Dynamically Enhance your imagesusing a Recordset

Introduction

In this tutorial we're going to use a Recordset to enhance the images from your database automatically. We advise you to use Pure ASP Upload 3 or Pure PHP Upload 2 and to use Smart Image Processor ASP 2or PHP 2 to upload and resize your images. You can save the image file names and dimensions using the insert or update record server behaviors. After that you can create a recordset to query the database.

Note: This tutorial is for Dreamweaver CS3 users only, the workflow is the same for all server languages

Automatically enhanced images from a Recordset.

1. Before you begin
   Make sure you've read the previous tutorials.
2. Creating a basic page
   We create a basic page in Dreamweaver (make sure you've defined your site) and save it.
3. Creating a Recordset
   Go to the Application panel on the right side of your screen, select the Server Behaviors tab and choose Recordset (Query).
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   A new popup appears, select the correct  Connection and choose the Table that lists the filenames of your pictures.
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Press Test to see if your connection works, you should see a list of filenames, if so press Ok to return to the Recordset popup and press Ok again. If you don't see the filenames, make sure you have selected the correct Connection and Table and make sure you have entered some filenames in your database.
   
   
   
   

 

4. Include your Images with Flash Image Enhancer
   Choose the  icon from the DMXzone object bar to apply the extension, the Flash Image Enhancer appears. You can also use an existing image, select the image and then choose the  icon.
   
   

Setting the Display Options
Select our image by pressing the Browse… button next to the image field, this is where you select the Data Source. We choose the filename to display all images that are listed in our Recordset, then we select OK.

5. Dimensions & Layout

The extension automatically gets the width and height from the image in pixels, it works the same as a normal image that you insert in Dreamweaver so you can blow it up or make it smaller as you like. The

 icon is for getting the width and height from your Recordset.

We select the  icon next to the Width field and choose @width.

We do the same with the height icon next to the Height field.

6. Displaying Effects – Rounded Corners, Reflection and Drop Shadow

We enable the Rounded Corners, Reflection and Drop Shadow. Feel free to experiment with the settings.

 

7. Mouse over Effects – Dynamic Text

We select the  icon next to the Text input field to dynamically load our photo descriptions.

   

8. Repeat Region
   Select the image in the design view and select Repeat Region in the Server Behaviors tab of your Application panel.
   
   
   
   A new popup appears, we leave the default values and press OK.
   
   

 

9. Reapply the extension
   Select the image and press the Edit Advanced button in your property inspector, press OK.

Note: This step is mandatory to make sure the extension is applied to the repeat region.

 

10. Final Steps

Press Ok, save your files, upload them to your server (including the script library) and the result should be similar to the image below (only with different images and effects).