.

The image component, whose option icon is shown in figure 1, creates an image.

When you first add an image option it shows as a black space, as you have not yet chosen an image.

Choosing an image

Above each image component is an image bar, as shown in figure 2.

Click on the image bar to open the image window, as shown in figure 3.

The top section of the image window lets you browse the images previously uploaded to your site and upload new images. The bottom section of the image window shows the details of the current image.

Images are grouped into folders. A folder is shown as up to four small thumbnail images with the folder name underneath. Clicking on a folder shows its contents. Folders may contain other folders, and the breadcrumb trail at the top of the image window shows your current location within the folders.

Click on an image to see a full size preview. Click Delete to remove the image from your site entirely. Click Select to select the image and return to the folder contents view. Click Back to return to the folder contents view.

After selecting an image, the preview in the bottom left of the image window will be updated. Click Save to apply the changes to the image. Click Cancel to return to the page without changing the image.

Zooming and cropping

The image bar can be used to zoom and crop the image. Hold down the mouse on the plus and minus symbols to zoom in and out. Click and drag the arrow in the middle of the bar to crop the image. If the image has been zoomed or cropped, click and drag the image itself to control which part is visible.

Uploading an image

To upload a new image, browse into the folder you want to contain the image and click Upload images. Select one or more images (you can select multiple images by holding down Control, or Command on an Apple Mac). If the images are very large they will be resized in your web browser before uploading. Once the images have been uploaded you will be returned to the folder view.

Folders

Folders can be used to make it easier to find previous images. We recommend creating a folder for each page on your site. To create a folder, enter its name in the field below the Create folder button and then click Create folder. If a folder is empty it can be deleted by clicking Delete folder.

Other details

The bottom section of the image window shows the details of the current image.

The text equivalent, often referred to as alt text, is intended to be a text equivalent of the image to be read by people who cannot see the image. The text equivalent is also used by search engines to determine the nature of the image. It is important to remember that although the text equivalent is read by search engines, it is intended for human consumption. For a purely decorative image (for example, a decorative divider), the text equivalent should be left blank. For an image that conveys information, the text equivalent should convey equivalent information. For example, a graph showing sales over the past year might have a text equivalent stating “Sales rose 12% over the past year, from 3167 units to 3547 units”.

Click Link to: to turn the image into a link, in the same way as linking text.

Use the Dimensions field to set the height of the image. This can be useful to ensure images in neighbouring columns are the exact same height.

Check the Lightbox checkbox to make the image display a full-sized version when a visitor clicks on it.

Click Save to apply the changes to the image. Click Cancel to return to the page without changing the image.