Building a Forum with Dreamweaver – Part 1: Displaying Profile Photos
Displaying Profile Photos
Here is how you want to display the user information: user name followed by a thumbnail of the user’s photo. Place your cursor in the left
name_usr field from the Bindings tab and drop it where the deleted text was (see Figure 34).
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:
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.
- In the Recordset pop-up menu, select the
rsMessagesrecordset you created earlier.
- In the Field pop-up menu, select the
photo_usrrecordset field that stores the photo names.
- 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.
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).
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.
Next, display the actual message information:
- Select and delete the message subject placeholder text. Drag and drop the
subject_msgfield from the Bindings tab in its place.
- Repeat the same procedure to replace the message body text with the
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_msgfield after the entered text (see Figure 37).
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 thetag to select it (see Figure 38).tag
Doing this selects the content within the whitetag (see Figure 39). Figure 39. Content selected within the contenttag
Go to the Application tab of the Insert bar and click the Repeated Region icon. Configure the dialog box that opens to use the
rsMessagesrecordset 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.
In the next section, you will learn how to show or hide content using conditional regions.