Images in the Editor

Formatting Tool Bar highlighted to show buttons used for adding images in the editor.

Media Picker #

You can insert an image from your  Media Library directly onto a page using the  Media Picker. If you would like to insert an image that you have not yet uploaded to the   Media Library, you can also upload it using the  Media Picker.

The  Media Picker is only used for uploading images in the editor. It cannot be used for uploading or inserting any other media, including PDFs, in the editor.

Selecting an Image from the Media Library #

  1. Click  Media Picker.
  2. This will present a  Media Gallery box to the right. Locate and click on the image you want to place into your page.
  3. Fill out the "Alternative Text" field. This helps makes your image more accessible. Note: Alternative text can be edited at any time by clicking on an image already inserted and clicking the  Media Picker.
  4. Click Submit.

Uploading an Image Using the Media Picker #

  1. Click  Media Picker.
  2. This will present a  Media Gallery box to the right. Navigate to a folder (if desired) where you want your image to upload to. (Read more about Media Library Management). Otherwise, move to step 3.
  3. Click the gray "Upload" button in the top right corner. An “Open” dialog box should appear allowing you to browse your computer for the image you wish to use. Note: Please reference our Naming Conventions before uploading your file.
  4. A second box will appear over the  Media Gallery, asking for you to choose a media type. Click  Picture.
  5. Follow steps 3-4 of "Selecting an Image from the Media Library".

Specifying Alternative Text #

Alternative text (also often referred to in the Feature Area as "Feature Alternative Text") is a way to label images, and it's especially important for people who can’t see the images on our website (assistive technology, like screen readers). It's also important for situations where an image isn’t able to be downloaded by a user’s browser. Alternative text should describe the image in a brief sentence and it should be included on all images.

Learn About Writing Alternative Text

Image Floats #

Floating an Image allows content on the page to wrap about your image. Image floats are applied using the "Formats" drop-down in the Formatting Tool Bar to images already in your content.

How to Float (or un-Float) an Image #

  1. Highlight the image. If you have not placed an image yet, read about using the Media Picker.
  2. Click on "Formats".
  3. From the drop-down, click "Float Image (Left or Right)".
  4. (Optional) To stop an image from floating, repeat steps 1-3.

Figure (Images with Captions) #

Utilizing the  Figure macro will pair an image with a corresponding caption to allow people, assistive technology, and search engines to relate the caption to the image. This differs from simply defining alternative text. Captions are visually displayed alongside the image, whereas alternative text only appears if an image fails to load or is being read via assistive technology.

Images with captions are added using the  Figure macro in the editor. Read more about using a Figure on the Figure page.