Create a dynamic fluid image gallery with Lotus Notes views

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.
Related resources from SearchDomino.com:
How to export Lotus Notes views to a Microsoft Excel database

Write HTML and JavaScript in Notes view rows and columns on the Web

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='" + "http://www.yourserver.com/yourdatabasepath/
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.

  4. In the page properties, create a page and check off the HTML as Web Access content type.

    Next, place this code into the page: 

    div.item_img{
  margin: 10px;
  height: auto;
  width: 140px;
  float: left;
  text-align: center;
  border: 1px;
}
  5. Save the page and name it: main.css.

  6. 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='http://www.yourserver.com/yourdatabasepath/
yourdatabasename/main.css' rel='stylesheet' type='text/css'>"
  7. 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.

  8. Add this code after the embedded view: 
    </td></tr></table>

    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 SearchDomino.com 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.

This was first published in July 2009

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top