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


Figure 1. the image option icon


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



Editing an image

Click on an image to enter image-editing mode. The original image (or a black square if you have not yet chosen an image) is shown, overlaid with a rectangle with four circular handles in its corners, as shown in figure 2.


Figure 2. an image with handles


To control the part of the image that will be shown (the cropped area), click on one of the handles and and drag it to resize the rectangle. To prevent the aspect ratio (the ratio of width to height) from changing, hold down the shift key when clicking on the handle. To move the cropped area, click anywhere inside the rectangle and drag it.


At the top of the screen is the image-editing toolbar, as shown in figure 3.


Figure 3. the image-editing toolbar


The toolbar contains the following buttons:


Choose image

Clicking this button will open the image manager, described below, to let you choose which image to use.


Text equivalent

Clicking this button will let you set the text equivalent for the 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”.


Link image

Clicking this button will let you turn the image into a link, in the same way as when linking text.


Lightbox

Clicking this button will let you turn on and off the lightbox effect. When turned on, visitors can click on the image to see a full-screen version. If multiple images on a page have the lightbox effect turned on, visitors can browse between them when the lightbox is open.


Aspect ratio

Clicking this button will let you set the image aspect ratio. The image aspect ratio is set as a width and a height. For example, a wide-screen image has a ratio of 16 wide to 9 high; this could also be entered as 1920 wide and 1050 high, which is the size (in pixels) of standard high definition image in a 16:9 aspect ratio. Checking the Lock ratio box will prevent the aspect ratio from being changed when dragging the handles to crop the image.


Undo

Clicking this button will undo the last change to the image.


Redo

Clicking this button will redo the last change to the image.


OK

Clicking this button will leave image-editing mode, keeping any changes.


Cancel

Clicking this button will leave image-editing mode, discarding any changes.



Managing images

Clicking on the Choose image button on the toolbar will open the image manager, as shown in figure 4. The image manager lets you upload, rename, and delete your images, and organise them into folders.


Figure 4. the image manager


At the top of the image manager is a breadcrumb trail, showing you where you are and letting you navigate more easily. The image manager will start in the folder containing the current image, or the All Images folder if you have not yet chosen an image. If you move into a folder inside the All Images folder, its name will be added on to the end of the breadcrumb trail. You can then click on the All Images breadcrumb to move back to that folder.


To upload images into the current folder click Upload images…. You can then select one or more images to upload — hold down the Control key (or Command key on an Apple Mac) to select multiple images.


Below the breadcrumb trail and upload button is a list of the contents of the current folder.


To create a new folder inside the current folder, click the icon labelled Create folder. Enter a folder name, which may consist of letters, numbers, spaces, underscores, hyphens, and periods, and then click Create. Once the folder is created the image manager will move into it.


Folders are indicated with a folder icon, as shown for the About us page, Contact us page, and Home page folders in the example above. To view the contents of a folder, click on its icon. Click on a folder’s name to rename it or delete it. You can only delete a folder if it is empty — this prevents you from accidentally deleting a large number of images in one go.


Images are indicated by a small thumbnail image in a frame, as shown for three images in the example above. To choose an image, click on its thumbnail; the image manager will then close. Click on a image’s name to view its details and rename it or delete it. Before deleting an image, you should remove any image components using it from your site.


Below the list of contents is a usage indicator showing how much of your allowed space for images you have used.