Display dynamic thumbnails

The Show Thumbnail server behavior allows you to display dynamic thumbnail images in your site pages. Before applying it, a recordset must be created in your Dreamweaver page. This recordset should contain the image/thumbnail names in one of its fields.

This server behavior is accessible from the Application panel, Server Behaviors -> + -> MX Kollection -> File Upload -> Show Thumbnail.

No image thumbnail is actually created until the page containing a Show Thumbnail server behavior is requested in the browser for the first time. When a thumbnail is created on the server, it is saved in a folder called thumbnails, created inside the image upload folder (either statically or dynamically). In the example below, the image upload folder is called images.

The name of the thumbnail is generated automatically. If the original image is called filename.ext, the corresponding thumbnail will be called filename_WxH.ext, W representing the width and H representing the height of the thumbnail.

 

Depending on the version of MX Kollection 3, the user interface can contain one tab or more. The user interface tabs are:

 

The Basic tab

 

Directions about how to configure the options on this user interface tab are given below:

 

 

To set the dialog box options, follow the next steps:

  1. In the File folder text box enter the name of the folder from where the thumbnail images will be retrieved. You can use the Browse button to select a static folder and then you can append to it a dynamic value by using the InterAKT Dynamic Data selector.
  2. In the Recordset drop-down menu select one of the recordsets defined in your page.
  3. In the Field drop-down menu select the table column that stores the names for the thumbnails to be shown. You can also select None (which means that the thumbnail image name will not be retrieved from the database) or None: Rename rule. Only in the latter case, the text box below will be enabled.
  4. In the Renaming rule text box, when enabled, enter a custom name rule used to save the thumbnail. The name can only contain constant expressions and the current recordset fields. The InterAKT Dynamic Data selector allows you to input dynamic data in the corresponding field.
  5. In the Resize method drop-down menu select one of the available options. Read a detailed explanation on this here.
  6. In the Width text box, when enabled, enter the number of pixels corresponding to the image width.
  7. In the Height text box, when enabled, enter the number of pixels corresponding to the image height.
  8. The three buttons in the top right corner of the interface offer you the next functionality:
    ·     Click OK when you are done configuring the server behavior.
    ·     Click Cancel to exit without applying the new settings.
    ·     The Help button opens this help page.

The Popup tab

This user interface tab is only available in MX Kollection 3 Professional and allows defining popup viewing options: whether to display in another window and whether to use navigation. To set the options on this user interface tab, follow these instructions:

  1. Tick the Display image popup in new windows to enable the use of a pop-up window to display the image.

  2. Tick the Allow navigation checkbox if you want to add a navigation bar in the pop-up window to browse through the images.

  3. In the Width text field enter the width in pixels for the pop-up window with the image preview.

  4. In the Height text field enter the height in pixels for the pop-up window with the image preview.

  5. Tick the Fit to window checkbox in order to force the image displayed in the pop-up to have the same size as the window.


     

 

The Watermark tab

 

This user interface tab is only available in MX Kollection 3 Professional and allows applying a watermark on the thumbnail to be displayed. To set the options on this user interface tab, follow these instructions:

  1. Tick the Apply Image Watermark checkbox to enable adding a watermark over the thumbnail that is created and displayed.

  2. Tick the Apply popup Watermark checkbox to enable adding a watermark over the thumbnail that is displayed in a popup window. This checkbox is enabled only if you have decided to display thumbnails in a pop-up.

  3. In the Transparency text field enter a value between 0 and 100 which will be the value of the watermark transparency. The higher the value, the more opaque the watermark will be.

  4. In the Select Watermark Image file field click the Browse button to select a file from the local site structure.

  5. In the Vertical drop-down menu select where to position the watermark image over the thumbnail on the vertical axis. You can choose between top, center and bottom.

  6. In the Horizontal drop-down menu select where to position the watermark image over the thumbnail on the horizontal axis. You can choose between left, center and right.

  7. In the Resize method drop-down you can decide whether to modify the watermark to better fit the image. Available options are:

    1. Do not resize - the watermark stays at the initial size and is applied as such over the image, in the desired position

    2. Stretch - the watermark is resized to the thumbnail to be applied on size. The positioning does not matter any longer.

    3. Resize - specify a fixed width and height to resize the watermark to.

  8. In the Width and Height fields which are enabled if you select the resize option enter the value in pixels for the watermark image.

 

After applying this server behavior, a translator will be shown in your Dreamweaver page: