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

  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:

    div.item_img{
      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='http://www.yourserver.com/yourdatabasepath/
    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:
    </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

Dig deeper on HTML for Lotus Notes Domino

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

SearchWinIT

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchVirtualDataCentre.co.uk

Close