List Control - Working with Images - Data Bound Images Part 3

UX Component

In this document and accompanying video we will continue our discussion on data bound images in a List Control.


Watch Video 3


Next we will learn how to turn the character field in our example, which contains the name of an image, into a display of an image:




Previously we have seen the folder in A5Webroot called MovieImages that has an image for each record:




To convert the character field we start by clicking the Design tab, then List properties:




When the List Builder window opens click on the Fields tab.  We see that movieName has been formatted as a Label Control type, but let's change that to RawData so that the data will not be formatted at all:




Click the List Layout tab to see that the placeholder called {movieName} is not formatted as a label, but is instead completely unformatted allowing us to create our own image tag to display the data:




To do that we click on Template:



When the Column Template window opens we will replace the template with the line of code shown below.  We change the HTML that we will use to display the character field into an image tag displaying data in the MovieImages folder.  {movieName} is the raw name, which is completely unformatted, and contains the data in the column with a .JPG extension:




Click Save, then Firefox and Fast Preview to run the list:




We see the character field (Moviename) is being displayed as an image: