Displaying Images in a Data View

How to display data-bound images inside a data view on a page.

About this technique	Details
Category	HTML Client Techniques> HTML-based views
Description	You'll learn about: Setting up Associating a database with the page Creating the data view control Creating the label control Setting the label to raw HTML mode Testing the page
Related reading	See the chapter on using HTML-based views in the Programmer's Guide

The approach illustrated here uses a label control, not an image control. You will set the label to be in raw HTML mode and tell it to generate HTML code that produces an image for each row based on the data.

Setting up   

Set up the image files and database as follows:

1. Upload the images to Media (optional). If you upload the images, the path to retrieve them will be consistent and they will be easily managed as part of your SilverStream application.

2. Create a database that has a column to store file names for the image files.

3. Enter data for the file name column. These entries should be consistent. You will probably either enter the entire path, including the file name, or just the portion of the pathname.ext that changes.

Associating a database with the page   

If you chose one of the HTML form page wizards when you created the page, you will already have associated a database with it.

If you chose the static page wizard, you will need to associate a database with the page by selecting the desired database in the Relational Data Palette.

Creating the data view control   

In this step, you create a data view control and associate it with data.

1. Drop a data view control onto the page.

2. In the Property Inspector, set its Table Name property to the desired database.

3. Enter a Link Clause in the Property Inspector that will result in some rows to display. For example:

     tblEmployees.imageFile <> "" 
   

Creating the label control   

In this step, you create a label control and sets its properties.

1. Drop a label control into the desired column of the second row of the data view.

2. Leave its Type as LABEL in the Property Inspector.

3. Enter an expression in the Property Inspector that looks like this:

     "<img src=\"../Objectstore/Images/" + 
       tblEmployees.imageFile + ".gif\">" 
   

   The expression will be evaluated at runtime for each row shown in the data view.

Notes about the label expression

• Be sure to include the beginning and ending quotes in the expression.

• The backslash keeps the next character as a double quote rather than ending the string in the expression.

• Use a forward slash to separate directories in the path.

• Leave out the file extension in the expression if you had entered it in the data.

• If you did not upload the images to Media, substitute an expression that will work with the file names that are in the database.

• The expression will construct HTML that looks something like this for each row:

    <img src="../Objectstore/Images/filename.gif"> 
  

Setting the label to raw HTML mode   

This step illustrates how to set the label control to in raw HTML mode. This is important because it means you do not have to escape any HTML tags in the expression.

• In the Programming Editor, add this line to the pageLoaded event for the page:

    // pageLoaded event of the page 
    // Set the image label to raw HTML mode. 
    Label1.setRawHTMLMode(true); 
  

Notes about the code

• When the page is loaded for the first time in the session, the code sets the mode for the label to raw HTML.

• Substitute the name of your label control if it is different.

• If you forget this step, the label's expression will be quoted in the HTML output rather than interpreted.

Testing the page   

Try running the page. If you don't see the desired effect, view the source in the browser. It should have lines that look like this where the images are supposed to appear:

  <img src="../Objectstore/Images/filename.gif">