Replacing Fields with Pictures

Top  Previous  Next


You can replace fields in your web pages with images.  The image filename can be related to the field value itself, or a combination of field values and text literals. This powerful feature lets you use your dataset data to change all or parts of URLs to images.  This is very useful in creating web pages that show individual images for each record.


For example, you can easily build a web catalog with images of your products, if you create a directory of images where the filename of each image is the corresponding product ID.jpg.  By including the product ID in your data you can build a link to each image using the database product ID plus the literal ".jpg" to create the picture URL.


To Replace your Data values with a Picture:


1. Right Click on the Page Item you wish to substitute a picture into. Select Properties from its popup menu. You will see the Page Item Properties window.


2. In the Common section,  Change the Type to "Image".


3. Click on btn_edit_006, the Edit Value dialog will be shown.


4. In the Edit Value dialog, do the following:


- Type the fixed part of URL in the editor box (eg. /images/products/) .

- Insert the field data into the URL by double clicking on the field names (eg. [ProductID]),



- Click on the field name you want and then click the Add Field button as btn_add_field_004.

- Type the suffix followed that field name (eg. type the file type after the field name, such as .jpg).

  It should look like the following example:-




5. Click OK.


You will see in the sample data that dbQwikSite will replace the field name with the actual value of that field in each record. (eg images/products/PID101.jpg and /images/products/PID102.jpg and so on.) When finished, the preview should look like this:-







You can change the image height and width as you like, or uncheck the boxes, to allow the image to resize automatically.


What if there is no picture available?


In version 4.5 and above dbQwikSite will substitute a  "missing image" picture if any items graphic cannot be found when displaying pages.  This gives your pages a more polished look, as opposed to showing the standard "broken image" icon.


dbQwikSite will show this:


Rather than this:



Hint: If you want to use you own image rather than the one supplied with dbQwikSite:  replace the file called: qs_nopicture.gif  located in the images subfolder of your project folder  eg: D:\My Documents\My QwikSites\Projects\YOUR_PROJECT_NAME\images