Manage Learn to apply best practices and optimize your operations.

Create a dynamic fluid image gallery with Lotus Notes views

Publishing image galleries from Lotus Notes views onto the Web isn't always simple. Dynamic image galleries will let all users view images from any screen resolution.

It's common to publish Lotus Notes views on the Web using a $$view template form. You would simply treat the view as HTML text and use the view column as an HTML table cell with a <td> tag. However, this method doesn't work to create image galleries.

Since each image item is stored in a single Lotus Notes document, you can only show one document per row. A workaround that uses @DBcolumn in a computed-text can help, but you still have to hard code the number of items that will appear per row.

Considering that screen resolutions vary by user, I wanted to implement fluid design -- displaying items so that they dynamically fit any screen width. CSS can help with this, and here are the basic steps:

  1. Create a form with a rich-text field. Then create a document from that form and attach an image file (thumbnail size) to the rich-text field. Save the document, then add your documents.
  2. Create a view. In the view selection, choose the form that you created in the last step. Next, create a column and insert the following code into the column value:
    "div class='item_img'>" +
    "<img src='" + "
    yourdatabasename" + "/0/" + @text(@documentUniqueID) 
    + "/$FILE/" + @AttachmentNames
      + "</div>"
  3. Save the view and name it: vProduct.
  4. REMINDER! Check off Treat view content as HTML in the view properties.
  5. In the page properties, create a page and check off the HTML as Web Access content type.

    Next, place this code into the page:

      margin: 10px;
      height: auto;
      width: 140px;
      float: left;
      text-align: center;
      border: 1px;
  6. Save the page and name it: main.css.
  7. Next, create a form and name it $$ViewTemplate for vProduct. Add the page main.css to this form by placing the following formula code in the HTML Head Content:
    "<link  href='
    yourdatabasename/main.css' rel='stylesheet' type='text/css'>"
  8. Next, add the view vProduct as an embedded view and insert this code before the embedded view:
    <table width="90%" border="0" 
    cellspacing="0" cellpadding="0">
    <tr align="center"><td>

    Note: By setting the table width to 90%, the table will increase/decrease depending on the width of the screen.

  9. Add this code after the embedded view:

    Finally, mark the text as pass-thru HTML.

    REMINDER! Select Display using HTML in the embedded view properties.

Check the view from your Web browser; it should be fluid for all screen resolutions.

Do you have comments on this tip? Let us know.

This tip was submitted to the tip library by member Saldi Taruna. Please let others know how useful it is via the rating scale below. Do you have a useful Lotus Notes/Domino technical tip or code snippet to share? Submit it to our monthly tip contest and you could win a prize.

Dig Deeper on HTML for Lotus Notes Domino

  • Favorite iSeries cheat sheets

    Here you'll find a collection of valuable cheat sheets gathered from across the iSeries/ community. These cheat ...