Working with images
Images in the main Body area and images inside of panes work a little different than a Primary image.
Use The Tree Icon
To add an image to these areas use the tree icon.
When clicked a new window opens and an image is added by clicking on the "Browse" image at the end of the "Image URL" field
Figure 1 - Insert/Edit Image window
This opens another window where you have the option to insert an existing image or upload a new image.
- Use the column on the right to choose the image you'd like.
- Click on it to have it highlighted in blue - you will also see a preview of the image you've chosen below the horizontal break.
- Choose "Insert File"
- Add an image description
- Why is this important? [add the copy from primary image]
- Click on the Upload Image button at the top left of the window which opens after you hit the browse button shown in Figure 1
- At the top left of the new window which opens you will see an "Upload" option, which when clicked allows you to browser you machine for the image you want to upload.
- Choose your image and click on the "Upload" button inside the File box
- If you are happy with the image, choose to "Insert File" into contentFigure 2 - Insert an uploaded image
Image Description/Alt Text - Required
Why is it essential? Three main reasons:
- It provides a description of the image for visitors who use screen readers and helps them understand what the image is about and why it has been added
- If a visitor has a slow connection, it displays in place of the image until the image can be loaded
- it provides meaning for search engines
If you are having trouble creating an image description, its helpful to imagine describing the image to a friend on the phone - what is the essence of the image, what information is being conveyed? WebAim, a site which focuses on creating accessible content, has a great page on creating good alt text
If you can't develop a description, please strongly consider not adding the image at all
Alignment - optional
Do you want text to flow to the left or right of an image? Then choose Left or Right in the Alignment dropdown.
Vertical and Horizontal Space - optional
Vertical and Horizontal space add a "gutter" around an image so that text does not butt right up against it. We suggest adding ten (10) to both - this adds a 10 pixel gap between the edge of the image and the edge of the text