Create a dynamic fluid image gallery with Lotus Notes views

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:
3. Save the view and name it: vProduct.

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:

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:
7. Next, add the view vProduct as an embedded view and insert this code before the embedded view:

   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:

   Finally, mark the text as pass-thru HTML.

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

Check the view from ...

Digg This!     StumbleUpon     Del.icio.us

RELATED CONTENT HTML Write HTML and JavaScript in Notes view rows and columns on the Web Open Lotus Notes documents in Microsoft Word without coding Trap an attachment path via the Domino file upload control field A bevy of Notes/Domino development tips Styling Lotus Domino Web fields How to convert Microsoft Word or Microsoft Excel documents to HTML An easier way to view multiple columns on the Web How to print a form in landscape format automatically Tip contest winner: Hide view column while being able to sort it HTML signature maker HTML for Lotus Notes Domino Write HTML and JavaScript in Notes view rows and columns on the Web Open Lotus Notes documents in Microsoft Word without coding Top 10 Lotus Notes/Domino coding and development tips of 2008 Trap an attachment path via the Domino file upload control field Mimic Lotus Notes Domino application functionality on the Web Top 10 Lotus Notes Domino programming and development tips of 2007 Creating a link on an HTML page to a Microsoft Word attachment in a Lotus Notes database A bevy of Notes/Domino development tips Top 10 Notes/Domino developer tips of 2006 Styling Lotus Domino Web fields

RELATED RESOURCES 2020software.com, trial software downloads for accounting software, ERP software, CRM software and business software systems Search Bitpipe.com for the latest white papers and business webcasts Whatis.com, the online computer dictionary

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.

Rate this Tip To rate tips, you must be a member of SearchDomino.com. Register now to start rating these tips. Log in if you are already a member. Submit a Tip 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.