webCommunicator
Reference Guide

Previous Page | Next Page

menubar
CLPad

Inserting Images

The Editor allows you to add images to your documents in an easy and intuitive way.

In order to insert an image, simply press the  button on the toolbar. The Image Properties dialog window will open. Click on Browse Server to upload a new image or browse existing files on the server. (For more information on Uploading files, formatting images, or resizing images, refer to the File Manager in the Reference manual.) Click on the file name to select it and insert the file name into the Image Properties dialog box. You can configure the image's appearance, link properties, etc., based on the information below.

The Image Properties dialog window includes three tabs that group image options: Image Info, Link, and Advanced. Only "Image Info" is necessary. "Link" and "Advanced" are optional.  "Advanced" is recommended for advanced users only.
 

Image Info

The Image Info tab is the default tab that opens after you press the  button on the toolbar. It allows you to set the image URL and configure the way it will appear in the document.

 

Below is an overview of all Image Info tab elements:

  • URL – the web address of the image. You may also use the "Browse Sever" in order to upload your own images to the server or to browse existing files on the server. For more information on Uploading files or formatting images, refer to the File Manager in the Reference manual.
  • Alternative Text – a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about, making it accessible to users with disabilities. It also aids in Search Engine Optimization (SEO).
  • Width – the width of the image in pixels. By default this is the size of the original image, but can be altered as you see fit.
    Note: Altering this will automatically alter the Height option, to avoid skewing or stretching the image.
  • Height – the height of the image in pixels. By default this is the size of the original image, but can be altered as you see fit.
    Note: Altering this will automatically alter the Width option, to avoid skewing or stretching the image.
  • Border – the size of the solid border around the image in pixels.
  • HSpace – the horizontal spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
  • VSpace – the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
  • Align – the alignment of the image in the document. Available options are Left, Abs Bottom, Abs Middle, Baseline, Bottom, Middle, Right, Text Top or Top.
  • Preview – a preliminary view of the selected image formatted according to the above listed options as chosen.

Link

The Link tab lets you assign a link to an image inserted into the document, effectively converting the image into a clickable link. The link can point to any kind of object available in the Internet, like a simple URL address, a PDF document, or an online video.NOTE: It is optional to add a link while inserting an image into the document. If you DO NOT wish for the image to be linked, the following associated options are also not necessary for inserting the image as-is.

To use the Link function, first insert an image into a document using the Image Info tab. After you configure the display options, switch to the Link tab and configure the image target using the available options.

  • URL – the web address that the image will link to. This may be a website url, a pdf, or any file that is located on the server.
    • External Link: If you want to use an external address, use the full absolute path.
      Example: http://vip.buzsoftware.com/buzdocs/index.cfm
    • Local Server: If the target location is on the same server as your website, you can use an absolute path that omits the domain name.
      Example: index.cfm?ID=85
    • You can also use the Browse Server button to select an image or a file from the ones that are available on the server.
  • Target – the window where the assigned link will open after clicking the image. You can choose between New Window (_blank), Topmost Window (_top), Same Window (_self), or Parent Window (_parent). If it is an external link, or links to a file such as a PDF, it is recommended to set the target as New Window (_blank).

To edit an image that is already in your document, right click on the image and select the Image Properties option. The Image Properties window will allow you to modify both the image and any link assigned to it. 

Advanced

The Advanced tab lets you configure additional image options such as assign it an ID, a class, a longer description, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the image is concerned.

The following is an overview of all Advanced tab elements:

  • Id – specifies the ID of the image.
  • Language Direction – sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
  • Language Code – specifies the language code.
  • Long Description URL – specifies the description of the page.
  • Stylesheet Classes – specifies the name of the CSS class.
  • Advisory Title – specifies the description of the target object.
  • Style – specifies the style.