Genii Weblog

Rich Text 101 - Images

Sun 20 Jul 2003, 11:10 PM



by Ben Langhinrichs
Rich Text 101 logo
Like so many other rich text structures, images have become more complex and powerful in recent releases.  Up until R4, all images fell into two categories.  Either they were "standard" images, such as the doclink icon or the default file attachment icon, or they were stored in a proprietary Notes bitmap format.  Whether the original image was a GIF file, or a JPEG file, or even a Windows bitmap file, all were converted into the ubiquitous Notes bitmap format.

While this has now changed, there were very good reasons for the decision.  Notes was a multi-OS product long before the world wide web sprang up, and it was not just the server that was multi-OS.  With clients ranging from OS/2 to AIX to Windows 3.1 to Windows NT, there was need for a graphical format that would be displayed appropriately, if not always equally, across all these OS platforms.  Since this was before the GIF and JPEG formats became standards, the proprietary Notes bitmap format was simply Lotus being ahead of the curve and creating its own standard.

After the advent of the web and more "standard" standards, Lotus released R5 with the addition of "native storage" for JPEG and GIF files.  These formats could now be stored as part of the composite data records and presented in their original format.  This had two large benefits.  The first was that the images suffered no loss from the conversions back and forth through the Notes bitmap format.  The second was that the compression technology used in these two formats was superior to the compression used in Notes bitmaps, so the images were smaller, sometimes tremendously smaller.

Current Image Formats
So where are we now?  There are now at least six different categories for images: 

  1. Standard icons for doclinks, file attachments and such
  2. Notes bitmaps (yes, they are still used, especially when cutting and pasting screen prints or importing from Windows bitmap files);
  3. GIF and JPEG native files stored in the rich text
  4. Image resources stored as separate design elements and shown inside the rich text.  These are usually JPEG and GIF files as well, although it is possible to make Notes bitmap image resources if you really try.
  5. Storage links, which are references to files stored elsewhere, such as through and attachment or a URL.  These are dynamically loaded at run time, and are usually created by importing HTML files, but can also be created by API programs such as Midas.
  6. MIME images, which are stored as MIME parts and imported to rich text at run time when displayed.  These aren't exactly rich text images, but since you can't tell the difference easily, we'll mention them here.

Now, why does it matter that we have all of these different types of images?  They all just look like images.  What difference does it make to me you?  The answers depend on what you are doing with the images, and whether they will be used on the web, and whether they may ever be changed.  Also, there are some subtle issues of how accessible your images need to be.

First, what if you want to use that image on the web?  If it is in the Notes bitmap format, the Domino engine will have to convert it to either GIF or JPEG format, which may entail some loss of fidelity.  (In other words, it may look like crap, pardon my English)  If it is in MIME format, or even storage link format, one of the weird oddities about the Domino engine comes into play, as it will first be converted to rich text and then converted back from rich text, even though it was in a web accessible format to start with.  Therefore, you really don't want that to happen.  The best answer is to ensure that you import (not copy and paste) from GIF and JPEG files in the first place.  On the web, they will be displayed in their native format, and in Notes, they will also be displayed in their native format.

Second, what if you want to change this image later, but you have used it several times in your rich text (a special image which is at the beginning of each section of a lesson, for example)?  In R4 days, you would have had to manually edit each document and change the image by re-importing the new one and deleting the old one by hand.  (OK, if you had Midas, you could have done it programmatically, but still, every document would have to be modified).  In R5 and Notes 6, you can simply make the image an image resource, and change the resource without editing the document.  No documents are modified, but the rich text changes nonetheless.

Third, what if you don't know what the image will be yet, because it comes from a URL, such as a stock chart presented as a GIF which is generated on the fly.  That image can't be in native stored format, or in an image resource, or even in Notes bitmap format, as it should be retrieved at the moment the user opens the rich text.  In that case, a storage link is most appropriate, as the URL is resolved when the user opens the document, so it may even be a different image for different users who open the document different days.

Finally, the question of accessibility is not obvious, but it does play a part.  Since Notes does not currently allow you to set alt text, which is necessary for accessibility, on an image resource, you would have to manage those images as one of the other formats.  With any luck, IBM will allow alt text to be set on image resources (perhaps a "default" alt text which could be overridden) in Notes 7.

Tip for using images more dynamically
The biggest drawback to the use of images in standard rich text, as opposed to forms, is that the images are not usually either available or modifiable.  For these reasons, it is often a good idea to use image resources.  If you do not have designer access to the database, but do have designer access to a generally available database, you can put the image resources in the available database and reference them from the locked down database.  Just make sure that any users have access to the available database!

Tip for making images appear based on conditions
It is a common mistake to add multiple images to rich text and use hide-when formulas to show them based on a set of conditions.  A far better approach is to make each an image resource and then add the image resource as a computed value and add your conditions there.  This saves space and complexity for the form or document.

Feature which doesn't translate to the web from the Notes client
An image in the Notes client can have a "caption", which appears either over or under or centered on the image.  This can be very powerful and convenient, but be aware that when translated to the web, these captions disappear completely.

Feature which doesn't translate to the Notes client from the web
The size of an image on the web can be specified in pixels, but in the Notes client, the only sizing available is through a percentage of the original size, which is just about useless unless you are visually measuring (it's about "that" big, holding your thumb and forefinger together).

Re-size images outside of Notes
If you have an image and want to show a thumbnail, or simply want to re-size the image, it may be tempting to simply use the Notes client to change the sizes, but this is a very crude method.  If the image quality matters at all, make another version of the image re-sized in an external graphics program and use that as well.  With thumbnails, this is even more important, as you not only lose quality, but you don't save any space.  The only possible exception to this tip is when the image is an image resource, and it may be better just to show the smaller size, but be prepared for pretty lousy quality on any but the very simplest re-sized graphic.

Copyright © 2003 Genii Software Ltd.

What has been said:


25.1. Ben Langhinrichs (07/21/2003 08:55 AM)

The RenderToRTItem approach might work, but in general, backend approaches fail because either a) the agent running the backend agent does not have access to the web, or b) the timing of the render is too fast to access images. This latter problem is more likely. You can see something similar if you try to write a UI agent that opens, edits and saves the document. If a user has to press a button to close and save, this works. If you have the keyclicks done automatically, the image is not retrieved in time, and you don't get the image. I have torn a lot of hair out over that problem (but have not tried in 6 due to affection for my few remaining hairs).

In other words, give it a try with RenderToRTItem, but if it doesn't work fairly easily, give it up as you are likely facing intractable problems.

Thi is where the MIME images work better, because the actual image is stored as part of the MIME parts. In R5, it is harder to create the image parts (unless you use our Midas product), but in Notes 6 it is possible.


25.2. rajesh (10/09/2003 05:37 AM)

please help me

i want to know in lotus r5 agent how do i store an image file(extracted form oracle databse in a binary file) on hard disk.


25.3. Ben Langhinrichs (10/09/2003 05:37 AM)

I'm not sure what you mean. Would you like to take an image in a rich text field and save it to disk, or take an image and include it in your rich text field?


25.4. alanjwhite (10/31/2003 04:46 AM)

I notice that the on-line documentation for Midas suggest that image in Notes bitmap format can't be exported as a files

However GIFs and JPEG's can.

From an old thread on notes.net (sorry LDD) I understood you were working on this. Has this - or will this - be fixed?

Further assuming a note R5 (0.9?) client, if the user does a "print screen" and then pastes into the Body of an email memo, is this now a "notes bitmap" or some other format?

Thanks in advance


25.5. Ben Langhinrichs (10/31/2003 05:02 AM)

First, Midas will now allow you to export Notes bitmap files as GIF files, but only with Notes 6.0.2 or later. Still working on a fix for earlier versions. Second, you are correct that a screen print will become a Notes bitmap, at least from a Windows machine. Not sure about what happens when you do it on a Mac.


25.6. ganapathiram (11/05/2003 02:43 AM)

Not sure if this is relevant.

This works with R6

1.Create a form A.create a field and choose Rich text Lite.

2.In the only allow choose graphics.

3.Have an optional field that gives info about the image

4.Create a document with the form created above and choose an image for the richtext lite field.Give a title for the image with the field created in step 2.

Create another form say form B

1.Create a field (a drop down)

that has the list of images stored this can be populated from Form B's title field you have created for describing the image.

2.Create a computed for display field and type in a dblookup formula that refers to the richtext lite field created in form A.

3.When you save form B you will be able to see the image that was ref in the document composed in Form A.

So when you change the image in the original document (created in Form A) it also reflects in the document created with form B.

This works because in richtext lite with option as graphics the image can be seen immeditely with out any ssues.

This method has some problems ,it takes some time for the notes to load the changed image,doesn't appear immediety if the image is change in the parent document;may be it's dueto caching.

Another thing I have observed with richtext not richtext lite is,if you store an image in a richtext field and set Issummary =true for it,the image can be displayed in views when the columnproperty is set to display icons.

Ofciurse if the size of the image is too big it won't display preoperly.

Hope I haven't wated your time.


25.7. Vrindakutty (11/08/2003 12:07 AM)

In My company i got one Database to manage all the employee details with ther photo. Now i am cretaing one Form in a different Database.

Once user enter his Emp ID i want to Display all the Details of that Employee with his photo in this From. can u help me? I Stored the images in Image Resources. All the employeee Photos renamed to his ID Number (1002.jpg).

Can u help me.

Thnx

Vrinda


25.8. Ben Langhinrichs (11/09/2003 07:43 PM)

Vrindakutty - This can certainly be done. Assuming you are using Notes 6, you can insert a computed image resource with the formula EmpID + ".jpg" and specify the database to pull from. If you need to include the photo and not the image resource, our Midas Rich Text LSX will let you do that as well. If this is not clear, send me more details vi e-mail.


25.9. Charlotte Jensen (23-06-2004 02:54)

Good article.

Can you please extend the information "Images as Computed values".

I have to make some images based on this, and it seems to work well, except that the size of the images does not expand or increase,when a bigger or smaller picture is displayed - even if size is set to 100%.

To explain: I want to make it configurable which picture is displayed on top of the frame and in the footer of a frame. I should either be able to choose "database icon", Logo or something else. The size of the picture is variable, so I cannot set a standard size.

Let say that I have made the code in the designer so the selectes image is the database icon. Then when choosing the logo, the picture is minimized to fit the size of the database icon - or similar the other way around.

How can I make a computed image where size does not matter?

:-) C


25.10. GeorgeBanning (10/29/2004 12:52 PM)

Hi Ben,

Is it possible to IMPORT an image from a file say "test.gif" to a specific location in a richtext field, knowing the location where that image should appear (some tag) and the location of this file, (some server).

Using R5, not ND6 yet, unfortunately.

Appreciated,

George


25.11. Ben Langhinrichs (10/29/2004 02:08 PM)

Certainly. As your company already has our Midas Rich Text LSX, you can simply use the AppendGraphic method with code such as the following (which will put it in a specific table cell, but which could be any valid chunk):

Set rtchunk = rtitem.DefineChunk("Table 1; Row 3; Column 2")

Call rtchunk.AppendGraphic("FILE", "c:\temp\test.gif")


25.12. Max (23/02/2005 08:57 a.m.)

Hi!

I have a problem, I have a form named "People", in this form contains all personal dates, now, I want that users can put her photo, but, the problem is the standard size, what can I do?


25.13. Sharmila Tilwalli Athanikar (04/14/2005 04:16 AM)

I want to know if there is any way of determining if a rich text field contains am image or not. (We are specifically referring to embedded Images and not attachments)


25.14. Sharmila Tilwalli Athanikar (04/14/2005 04:46 AM)

I did the folloowing:

' Midas backend classes

Dim rtitem As GeniiRTItem

Dim rtchunk As GeniiRTChunk

.

.

.

.

Call rtitem.Connect(db.server, db.filepath, noteid, "MyField")

But when I tried to run the agent, it gave me an error on this line saying :

"Error accessing Product Object Method"

I am passing the correct parameters for the Server, FilePath, Note ID and Field Name.

Any idea why?


25.15. Ben Langhinrichs (04/14/2005 04:52 AM)

It depends. If you do not have a current, valid license to the Midas Rich Text LSX, it failed because you don't. If you do, simply change the connect to

Call rtitem.ConnectBackend(doc.Handle, "MyField")

and see if that works better for you. If you are calling from a server, from a web agent for example, you could have specified

Call rtitem.Connect("", db.filepath, noteid, "MyField")

instead, as the server thinks of its own agents as "local", but you are better off usually using the ConnectBackend.

You could also use the @Midas Formulas for this if the LotusScript is too complex. It will work with either the handle or the noteid or @DocumentUniqueID.


25.16. titi (07/11/2005 04:38 AM)

How can i dysplay url for a image paste in the richtext field ?

Beste regards !


25.17. suze (08/17/2005 06:36 PM)

How do I convert MIME stored messages to something I can see or read. Obviosly I'm new to all this and it is very frustating. Is there an easy way to convert or where do I go to learn?


25.18. Ben Langhinrichs (08/18/2005 07:30 AM)

titi - You need to find the offset. If you had our Midas Rich Text LSX, you would simply connect to a rich text field, define a chunk as "Graphic 1", then use:

db.FilePath+"/Body/"+rtchunk.GraphicOffset+"?OpenElement&FieldElemFormat="+rtchunk.GraphicFormat

The GraphicOffset is the 0.18c or whatever part of the URL, while the GraphicFormat is GIF or JPEG or whatever. You could do this in @Midas Formulas with a simple formula as well, if that would work better for you (or in C++ for that matter)


25.19. Ben Langhinrichs (08/18/2005 07:35 AM)

suze - You can simply uncheck the "Display images after loading" database property and edit the document and save it. The MIME image will become an in-line image. If you need to do this programaatically, you would need our Midas Rich Text LSX, in which you would just set:

rtchunk.GraphicStorage = "inline"

and the image would be converted, no matter what the database setting.


25.20. Vignesh Chandrasekaran (10/29/2005 02:43 AM)

Ben,its nice men. Thanks for sharing it with us.


25.21. Michele Potvin (25/11/2005 11:39)

Is it possible to save an imported graphic file in a document to Image resource without going through Designer?


25.22. Rekha Singh (07/17/2006 11:46 PM)

how do i retrieve the value of fieldoffdet in rich text field in lotus notes?

Or how do i transfer image stored in rich text field to sql server column having datatype image?


25.23. Rehan Merchant (07/27/2006 08:08 AM)

Dear Ben Langhinrichs,

I run my own company in Dubai UAE and sell 2 WinningWebsite applications each month. The WinningWebsite is a Lotus Notes CMS and usually is used by 1 webmaster.

I wish to incorporate Midas features but your licencing is all for 50 users or more. Can you provide me with a quote for a minimum of 5 Users if not for a single user.

Please tell me where you guys are located. If youll are in Australia or Canada I would like to work with youll to see how we can create better Rich Text applications. I have done a lot of work using Lotus Notes Rich text even without enhancing its existing features so wonder what we can do together.

Hope to hear from you soon.

Regards

Rehan Merchant

www.raaiza.com


25.24. charles ross (08/02/2006 09:47 AM)

Hi Ben,

I'm wondering if this recent problem I've noticed with MS Office, especially Outlook 2003 is relevant to the rich text topic. I work in a "mixed" desktop site - we use office internally with outlook, but run Domino/notes for our hosted application. Since upgrading to Notes 6, Ooutlook 2003 and XP, I have a problem when copying and pasting Images or Tables from Notes documents to Outlook. It crashes Outlook.

My workaround is to copy, paste into MS Photo Editor (a relic from older Office that I still use a lot - to me it's like Notepad for images) as the go-between.

Does this have anything to do with ODF and the struggle for common rich text formats?


25.25. chip (04/17/2007 01:34 PM)

I was trying to implement your Coex product and have a problem with uploading images in the editor. It seems when I put in the url for the image, it doesn't put in the []before and after the url so Notes wont render the picture. I have to go in the client and put in the [] for picture to display. Do you know how I can work around this?


25.26. showriraju (08/09/2007 03:46 AM)

i am having a database i have to insert pdf files

and some scanned documents .these pdf files and scanned documents should not be copied or printed

is there any way to achive this . the pdf files are around 1000pdf files and 400 scanned documents

showriraju


25.27. showriraju (08/09/2007 03:47 AM)

i am having a database i have to insert pdf files

and some scanned documents into the lotus notes database .these pdf files and scanned documents should not be copied or printed

is there any way to achive this . the pdf files are around 1000pdf files and 400 scanned documents

showriraju


25.28. Prashant Chavan (04/04/2008 10:55 PM)

can anyone know the validation code for Rich text Lite field when doing an attachement????