container and remove the placeholder text User information. Drag the name_usr field from the Bindings tab and drop it where the deleted text was (see Figure 34).

Figure 34. Replacing the placeholder text

Now make some room for the image. Place the cursor after the dynamic text you’ve entered and press Shift+Enter. This inserts a line break after the user name.

To display a thumbnail of the user’s photo, you will use an ImpAKT server behavior called Show Thumbnail. This server behavior generates thumbnails of the selected images from your server.

Select the Server Behaviors tab > Plus (+) > MX Kollection > File Upload, and then select Show Thumbnail.

Configure the user interface as follows:

1. In the File folder text box, enter the path to where the user photos are stored. Click Browse and select the Profiles folder.

   Note: Make sure your database is populated with the sample data from the mm_forum.sql script and that the Profiles folder is inside your site root and contains the sample images that come with this tutorial.

2. In the Recordset pop-up menu, select the rsMessages recordset you created earlier.
3. In the Field pop-up menu, select the photo_usr recordset field that stores the photo names.
4. In the Resize method pop-up menu, select Proportional – Fit to box. This way, the aspect ratio of the photos is preserved, while guaranteeing that images fit the specified space.

5. For the box size, enter 80 for the Width and 80 for the Height, as shown in Figure 35 (these dimensions are specified in pixels).

   

   Figure 35. Show Thumbnail dialog box

6. Click OK to apply the server behavior. An image placeholder is displayed in the Design view. You cannot see the actual photos, however, because they are retrieved dynamically from the database (see Figure 36).

   Note: After you apply any of the ImpAKT server behaviors or wizards, a new folder will be created in your site root, called includes. This folder stores the files required for the server behaviors and wizards to work. You must upload the entire folder to your remote or testing server before previewing any pages in the browser.

   

   Figure 36. Image placeholder for the dynamic thumbnail

Next, display the actual message information:

1. Select and delete the message subject placeholder text. Drag and drop the subject_msg field from the Bindings tab in its place.
2. Repeat the same procedure to replace the message body text with the content_msg recordset field.

3. The last row displays the date and time when the message was posted to the forum. Remove the existing text and type Posted on (make sure to leave a trailing space so that the date will not appear right next to the text). From the Bindings tab, drag and drop the date_msg field after the entered text (see Figure 37).

   

   Figure 37. Displaying the date and time when the message was posted

4. At this point, all the necessary information is displayed on the page, but for one message only. To display all records, you must use a Repeated Region server behavior, just as you did for the topics list. From the tag selector, click the

   tag to select it (see Figure 38).

   Figure 38. Selecting the

   tag

   Doing this selects the content within the white

   tag (see Figure 39). Figure 39. Content selected within the content

   tag

5. Go to the Application tab of the Insert bar and click the Repeated Region icon. Configure the dialog box that opens to use the rsMessages recordset and to show all records.

   To test the page, save it and upload it to the testing server. Do not forget to upload the includes folder as well. Load the forum home page in the browser and click a topic title. If you use the sample data from the SQL script that came with this tutorial, select the topic called “Investment Opportunities”—this is the only topic that contains some sample messages. You should see an image similar to the one shown in Figure 40.

   <

   Figure 40. Previewing the topic page in a browser

   In the next section, you will learn how to show or hide content using conditional regions.

   Comments

   Related Posts

   No related posts.