Image

This module maintains and displays a page’s image(s). You can also specify the following for each image:

• Alt text: This is the text that is displayed when a visitor hovers their mouse over the graphic without clicking on it. (Try it with the image shown at right.) It is also used by specially configured browsers to verbally describe the image to visually-impaired visitors. Finally, this text is sometimes used by search engines to rank their results. That means it's a good idea to include keywords that might be used by visitors in search engines.

• Caption: The module can be configured by the designer to display the 'Alt text' below the image as a caption.

• Link: Entering a web address in this field will make the image clickable, leading to the address you enter. An address on the same site can be entered in the format "/page.cfm/1" (substituting 1 with the correct page number). An address elsewhere on the web must begin with "http://".

Upload Manager

The Upload Manager will then display a list of images on the web server, giving you the opportunity to view or delete any of them. Be careful deleting images! If there are any pages using the image you have deleted, those pages will show a broken image icon like this:

To upload a new image from your computer:

1. Click the 'Browse' button, and your operating system (Windows or Mac) will show its 'Open File' window.

2. Find the image on your computer and click 'Open'. The filename should then be displayed in the Upload Manager under 'Your Computer'.

3. Click 'Upload'. Caution: If a file already on the web server has the same name as the file you're uploading, the newly-uploaded file will replace the old one.

4. Repeat this process for each desired image and click 'Done'

5. If you return to the image selection form, you might need to click 'Refresh List' to see the most recently uploaded images.

A note about images

In addition to affecting the page layout, a large image can also slow the pageload because it's a larger file that must be downloaded to each visitor's computer.

The most recent versions of Windows and Mac should both include software for simple imaging tasks such as re-sizing. If you don't have software that allows you to do this, consider trying some freeware or shareware at www.Download.com.

Appropriate sizes for your images depend on the layout of your templates, but here are a few rules of thumb:

• Keep in mind that most computers use a resolution of 800 pixels wide by 600 pixels high, but some use 640 by 480 and others use 1024 by 768. Depending on your audience, you can use these numbers as a general rule. For example, a 200-pixel-wide image will take up 1/4 the width of most browsers (800x600), but be around 1/3 of the browser width for 640x480 browsers or about 1/5 for 1024x768 browsers.

• Images in the main body of a page generally work well at between 180 and 400 pixels wide, depending on whether text or other content will be shown alongside the image. Icons and images that must fit in "sidebar" areas of a page are more appropriate at 120 to 180 pixels wide.

• The designer of a template can provide the most appropriate sizes for a given situation.

Example:

To include multiple images in the same template, use this module once for each image, giving each module a different name.

Managing your users

Showing a caption

<cf_OnTheFly module="image" name="MyImage" show="image,caption">

Due to the limitations of HTML, however, this feature has limited application. The Image module places a <br clear="all"> tag between the module and the caption. This works well only when the Image module is in a table cell whose alignment is the same as the image, and without text wrapping around the image.

Icon module