Creating an image resource

About this task

You can create a resource library of images to use throughout your application. Image resources let you maintain the image in only one location. If there are any changes to the image, changing and refreshing the source file distributes the changes wherever the image is referenced.

Note: Refer also to the Domino® Designer XPages User Guide for more information on using images in Domino Designer.

To create a shared image resource

Procedure

  1. Expand Resources in the Applications Navigator.
  2. Select Images from the list of Resources.
  3. Click "New Image."
  4. Select GIF, BMP or JPG in the "Files of type" list.
  5. Select one or more graphic files you want to include as image resources.
  6. Click "Open." The graphic files you selected are added to the list of available image resources.

Results

You can now select this image from the Controls palette where you can drag-and-drop it on, for example, an XPage when creating a page design

Adding an image from the Control Palette

About this task

Use the following to import an image from the Control palette:

Procedure

  1. Drag an Image control from the Core Controls section of the palette onto the editor. You are presented with the Select Image window.
  2. Click the Add... button.
  3. In the Open window, navigate to the directory where the image file that you wish to import resides.
  4. Click on the filename of the image you wish to import.
  5. Click Open to add the image to the list of available image resources.

Results

The imported image also displays in the Resources-Images section in the Applications Navigator. It is now available from the image list every time you dran and drop an image from the Core Controls section of the palette.

To set image resource properties

Procedure

To set Image properties, select the image from the list of images and select the Properties tab following the work pane.

Basics tab

About this task

This tab contains information on the selected image and let you set basic properties and advanced properties at the image file level, for example, name, alias, comment and page placement and display options. You can also preview the image from this tab. You can also specify:

  • Images across and Images down (if you are creating image sets).
  • Colorize grays - lets an image blend with the user's system colors.
  • Needs refresh - adds the refresh symbol next to the image resource name in the list of images and targets it as an image to be refreshed.
  • Web compatible - appears if you are creating a horizontal image set (Images down) and want the images to work on the Web.

Web Properties tab

About this task

This tab contains options for setting properties on how images are handled in Web applications. This includes the following fields:

  • Read Only - Checking this causes the selected design element(s) to be read-only on the Web.
  • MIME type (for file resources only) - The MIME type of the file resource for Web clients. The Content-Type header of the HTTP response is set to this value. Domino Designer fills in this field if it recognizes the extension of the file resource (for example, a GIF image file or an EXE application file).

Info tab

Procedure

This tab contains file information such as creation date, modification date, size, access, etc.

Design tab

About this task

On the Design tab of the Image Resource Properties box, select any of the following design options:

Field or box

Description

Inherit from the design template

Type the name of a template from which the design element might inherit changes.

Prohibit design refresh or replace to modify

Select this to prevent this design element from being modified during a refresh or replace.

If you use a template to refresh or replace the database design, to ensure that this option takes effect, select this option as well as the option "Propagate this prohibition of design change" in the design properties of the template.

Propagate this prohibition of design change

Select this so that if a database inherits this design element, the "Prohibit design refresh or Replace to modify" box option will be inherited also, and it will still be selected.

Do not show this design element in menus of Notes® R4 or later clients

Select to hide the design element from Web users.

Hide design elements from (Web Browsers)

Select to hide the design element from Web users.

Hide design elements from (Notes R4.6 or later clients)

Select to hide the design element from Notes Release 4.6 or later clients.

Fields tab

Procedure

With this tab you can look up a field in a design element and troubleshoot if it is not running properly. To view specific information for each field, select the field name, and refer to the right panel which gives information about the selected field.

To colorize grays

Procedure

If you want an image to blend with the user's system colors, select the option "Colorize grays" on the Basics tab of the Image Resource Properties box. When enabled, the grays in an image that use the Domino palette change to the color scheme of the user's operating system. This feature lets the image resources blend in with the other elements of the user's system, such as dialog boxes and menu bars.

To insert an image resource

Procedure

  1. Open a form, document, or page.
  2. Place the cursor where you want to add the image.
  3. Choose Create - Insert Resource.
  4. Under Databases, select the database from which you want to insert the image resource.
  5. Under "Resource type," select Images.
  6. Under "Additional resources," select an image to insert from the list of images.
  7. Click OK to display the image in the form, document, or page.

Results

Tip: You can use the images among multiple databases by putting the image into a template. Databases inheriting from that template have easy access to the image.

For more information on creating templates and inheriting design, see the topic "Templates" in the chapter "Completing an Application and Managing Design Changes."

To insert an image resource from a file in the current database

About this task

You can insert an image resource from a file that you created and stored in your current database.

Procedure

  1. Open a form, document, or page.
  2. Place the cursor where you want to add the image.
  3. Choose Create - Image Resource.
  4. In the "Insert Image Resource" dialog box, make sure that the Database is set to -Current database-.
  5. Click "New."

    Browse your directory to include an image resource in the current database.

  6. After you have selected a file, in the Insert Image Resource dialog box, click OK.

    The image resource appears in the form, document, or page.

To rename an image resource

About this task

Perform the following steps to rename an image resource that you created.

Procedure

  1. Open a form, document, or page.
  2. Choose Create - Image Resource.
  3. In the Insert Image Resource box, select the image resource that you want to rename.
  4. Click Rename.
  5. Type a new image resource name. You should also specify an alias if there is a chance that the image resource could be renamed. To specify an alias, after the image resource name, type a vertical bar (|) followed by the alias name. For example, ImageName|ImageAlias.

    The new name appears in the image resource list.

To delete an image resource

About this task

Perform the following steps to delete an image resource that you created.

Procedure

  1. Open a form, document, or page.
  2. Choose Create - Image Resource.
  3. In the Insert Image Resource box, select the image resource that you want to delete.
  4. Click Delete. The image resource is deleted from the image resource list and from the database.

To reference an image resource with HTML

About this task

You can use Pass-thru HTML to reference image resources within a database.

Procedure

  1. Enter the HTML <img src> tag using the name of the image resource. For example:
    <img src="r5-banner.gif">
  2. Select text and choose Text - Pass-thru HTML.
  3. Optional: Use other HTML formatting tags to position the image.

To make design changes to an image resource

Procedure

To make design changes to a graphic used as an image resource, export the image to a graphics program. Once the changes are made, update the image resource and distribute the design changes.

Exporting an image resource

Procedure

  1. Select the image or images you want to redesign.
  2. Choose Resource - Export.
  3. Select the directory you want to copy the image to.
  4. Click Open.

Distributing design changes for an image

About this task

When you redesign an image resource, you can distribute the changes wherever the image appears in the database.

Procedure

  1. In the list of images in Domino Designer, select the images that have changed and click Refresh.
  2. In the Open dialog box, select the images from your directory.
  3. Click "Open."

Results

Designer automatically updates the image in all of the places it is referenced in the application.

Creating a custom letterhead

About this task

You can select a graphic to appear as the mail header for all employee mail. Simply add your company's logo to the image resources of your organizations' mail templates. Only employees who have access to the mail template will see the letterhead; other recipients, such as those outside your company or with an Internet mail account, will receive a standard letterhead.

For details on creating a custom letterhead, see "Creating a custom letterhead" on the Developer Domain.