.

The image component, whose option icon is shown below, creates an image.

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 below.

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 below.

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.

Colour overlay

Moving the mouse over this button will display a panel letting you add a colour overlay to the image.

Click on the colour swatch (small square of colour) to open a colour picker window to choose a colour from your site’s palette. You can add more colours to the colour picker using the Colours panel.

Drag the slider to control the opacity of the colour overlay. A lower opacity (more transparency) will allow more of the image to show through, while a higher opacity (less transparency) will show more of the colour overlay.

Text alternative

Clicking this button will let you set the text alternative for the image. The text alternative, often referred to as alt text, is intended for people with visual impairments who cannot see the image. The text alternative is also used by search engines to determine the nature of the image. It is important to remember that although the text alternative is also read by search engines, it is primarily intended for humans.

A common mistake is to describe the visual characteristics of the image in the text alternative. Instead, for an image that conveys information, the text alternative should convey equivalent information. For example, a graph showing sales over the past year might have a text alternative stating “Sales rose 12% over the past year, from 3167 units to 3547 units”. For a purely decorative image (for example, an image of a landscape or a business setting used to convey a general mood), the text alternative should be left blank.

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 below. The image manager lets you upload, rename, and delete your images, and organise them into folders.

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 (JPEG, PNG, or GIF formats) to upload — hold down the Control key (or Command key on an Apple Mac) to select multiple images. You can also upload ZIP, DOCX, or XLSX files and all the images contained in them will be added to the

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.

Searching for stock images

Click Search stock... in the image manager to search for stock images. The stock image search window, as shown below, will open. Enter a search term to search for images. When you move the mouse over an image, Use and Zoom buttons will appear. Click Zoom to load a large preview of the image; click anywhere to close the preview. Click Use to use the image on your site; the image will be loaded into the current image folder and the image manager will close.