Create a dynamic fluid image gallery with Lotus Notes views

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

    Requires Free Membership to View

    Login

    Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.

    By submitting your registration information to SearchDomino.com you agree to receive email communications from TechTarget and TechTarget partners. We encourage you to read our Privacy Policy which contains important disclosures about how we collect and use your registration and other information. If you reside outside of the United States, by submitting this registration information you consent to having your personal data transferred to and processed in the United States. Your use of SearchDomino.com is governed by our Terms of Use. You may contact us at webmaster@TechTarget.com.

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