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.

The image button is located between the anchor button and the format drop down

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

To add an image use the browse button

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. 

Add An Existing 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"
    An existing image is highlighted in blue.  Choose Insert File to add it to content
  • Add an image description
    • Why is this important? [add the copy from primary image]

Upload a New 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
    Upload an image using the button on the top left
  • If you are happy with the image, choose to "Insert File" into content
    An existing image is highlighted in blue.  Choose Insert File to add it to content
    Figure 2 - Insert an uploaded image

Essential fields in the image dialog

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