5 Working With Images

In addition to adding and editing text on your web pages, you can also add images. Images are a great way to illustrate a point or add color and variety to your pages. You can add, modify, and remove images in Contributor. The image can be in the JPEG, GIF, or PNG format, and it must be checked into the content server.

You generally perform the following tasks with images:

5.1 Checking Images Into Content Server

Before you can add an image to the Web site, the image must be checked into the content server. As is the case with native documents (see Chapter 10, "Working With Native Documents"), you can use one of the various methods available on the content server to check the image in.

Please note the following when checking in an image:

  • The image must be in the JPEG, GIF, or PNG format. Contact your site designer or site manager if you have questions regarding these files.

  • The image should be checked in using the appropriate Site Studio metadata so that it is recognized as belonging to the Web site. In particular, you should specify the correct value for Web Sites and Website Object Type. Otherwise, your images may get lost if the site is ever moved to another server.

  • The image may need to follow certain company style guidelines, like file type, size, and aspect ratio. Contact your site designer or site manager if you have questions regarding these policies.

Note:

For more information on checking content into the content server, see the Oracle WebCenter Content User's Guide for Content Server.

5.2 Adding Images

You can add images in Contributor using the editing toolbar. Once you add the image, you can resize it, change its properties, and more.

  1. Place your cursor where you would like to add the image.

  2. Click the Insert Image icon (Figure 5-1) in the editing toolbar.

    Figure 5-1 Image Icon

    Image icon
  3. A window opens displaying the search results page in the content server. Click Select beside the image that you would like to use. If you do not see the image you want to add, you may not have checked it into the content server correctly. See "Checking Images Into Content Server" for more information.

    If the content server has Digital Asset Management, then the Actions column in the results page shows the blue information icon, and a Digital Asset Management icon (Figure 5-2). Click the icon and multiple renderings of the image to use on the Web site are listed. Each rendering is a version of an image created by the content server when the image is checked in. The renderings available depend on how the content server is set up, but will typically include a thumbnail version, a preview version, and similar smaller-sized versions of the image ready to use on a Web site.

    Click Select beside the specific rendering of the image that you would like to use.

    Figure 5-2 Digital Asset Management icon

    Digital asset management icon
  4. The search results page closes, and you return to Contributor, where you see your image on the page.

Note:

When you add an image, an Alt tag is included automatically. By default, the Alt tag is the content item title (dDocTitle), but this can be changed using the SSAltTagFieldName parameter in the content server's configuration file (config.cfg).

5.3 Replacing Existing Images

You can easily replace an image that you (or another contributor) previously added in Contributor.

To replace an existing image, perform one of these tasks:

  • Click anywhere on the image to select it. The image shows it has been selected when it displays a frame (Figure 5-3). Now you simply add the image, which replaces the old image. For more information, see "Adding Images".

  • Click anywhere on the image to select it. The image shows it has been selected when it displays a frame. Right-click and choose Image Properties. You can now click Browse Server to select a different image on the server.

  • Click anywhere on the image to select it. Delete the existing image (by pressing the Delete key on your keyboard) and then insert an image. For more information, see "Adding Images".

Figure 5-3 Unselected and Selected Image

Unselected and selected image (with frame)

5.4 Resizing an Image

You can resize an image in Contributor using your mouse or using the image properties dialog.

Resizing Using the Mouse

To resize an image, perform these tasks:

  1. Select the image so that it is displayed in a frame (Figure 5-4).

    Figure 5-4 Unselected and Selected Image

    Unselected and selected image (with frame)
  2. Click and drag any of the boxes of the frame to resize the image.

Resizing Using the Image Properties Dialog

You can also change the size of an image in the Image Properties dialog. See "Changing the Properties of an Image".

Considerations

  • Before you can add an image, the image must be checked into the content server (see "Checking Images Into Content Server").

  • Although you can view BMP files in the content server, you cannot add these to your web pages. You can use only GIF, JPEG, or PNG files.

  • Only the images with the file extension .gif, .jpg, or .png, and those checked in with Image as their "Website Object Type" appear on the search results page.

  • The Insert Image option may be the only available option in Contributor, depending on how the site was set up.

  • Alternatively, you could resize the image by changing its height and width in the Image Properties dialog (see "Changing the Properties of an Image").

  • If you use any drag handles other than the ones on corners, the aspect ratio of your image changes. You can use the icons to the right of the width and height fields on the image properties dialog to lock the aspect ratio of the image or reset the image to its original size (width and height).

5.5 Changing the Properties of an Image

You can change the properties of an image, including its height, width, and border using the image properties dialog in Contributor.

To change the properties of an image, perform these tasks:

  1. Place your mouse cursor anywhere on the image.

  2. Right-click, and select Image Properties from the menu.

    The Image Properties dialog is displayed (Figure 5-5).

  3. Specify or edit each image property as required:

    • Image Info tab:

      • URL: This is the URL of the image on the content server. You can use the Browse Server button to select a different image to replace the current one.

      • Alternative Text: This is the alternative text of the image (that is, the value of the Alt attribute value of the IMG tag). The default is the title of the image on the content server. (See the notes below for typical uses of alternate text.)

      • Width: Specifies the width of the image (in pixels). The default is the actual image width.

      • Height: Specifies the height of the image (in pixels). The default is the actual image height.

        Note:

        You can use the icons to the right of the field to lock the aspect ratio of the image or reset the image to its original size (width and height).
      • Border: Specifies the size of the border around the image (in pixels).

      • HSpace: Controls the horizontal spacing on the left and right sides of the image (in pixels).

      • VSpace: Controls the vertical spacing on the top and bottom sides of the image (in pixels)

      • Align: Aligns the image with other items on the page (left, middle, right, top, and so on). The preview area shows how the image aligns using the current settings.

    • Advanced tab (for advanced users):

      • Id: Specifies the ID of the image.

      • Language Direction: Sets the language direction of the image: left to right ( LTR ) or right to left ( RTL).

      • Language Code: Specifies the language code of the image (for example, 'en', 'de', 'fr').

      • Long Description URL: Specifies the description of the page.

      • Stylesheet Classes: Specifies the name of the CSS class for the image (that is, the class attribute value of the IMG tag).

      • Advisory Title: Specifies the description of the target object.

      • Style: Specifies the style.

  4. Click OK to close the dialog.

Considerations

  • Many of the settings in the image properties form (height, width, border, horizontal spacing, and vertical spacing) specify their values in pixels. (For more information about pixels, contact your site designer or site manager.)

  • The alternative text for an image can be quite useful. By using the "alt" attribute value, you can ensure that alternate text displays when you hover the mouse over the image or the image does not display properly on the web page. In addition, this works for most screen reader programs, which are used by the visually impaired.

5.6 Deleting an Image

You can easily delete an image that you (or another contributor) previously added in Contributor.

To delete an image, perform these tasks:

  1. Click to select the image so that it is displayed in a frame (Figure 5-6).

    Figure 5-6 Unselected and Selected Image

    Unselected and selected image (with frame)
  2. Press the Delete key on your keyboard.

    Note:

    The image is removed from the web page, but it is not removed from the content server.