CMS Guide

Creating Inline and Captioned Images

Many of the content types have fields to add an image. This ensures the image is added in the appropriate spot for that content type. You can also add an inline image within the WYSIWYG editor.

Content types that have a field for image caption

Adding an inline images

  1. Navigate to the page where you wish to add an image. Click on the Edit tab. Scroll to the WYSIWYG area and put the cursor where you want the image to appear.
  2. Click on the Insert Image button in the WYSIWYG toolbar.
  3. In the window that pops open, click Choose File. The Chooser menu appears on the right, allowing you to select a Recent file or Browse. Click Choose to select your file.
  4. The remaining pop-up window will show the path to and dimensions of the file. In the Image description field, write a very brief description of the image. This alt text text will appear or be read to a person who uses assistive technologies.

Caution: Do not check the box next to This is a decorative image. A decorative image will be ignored by assistive technology. Photographs are not decorative images and require alternate text/image description.

  1. Width/Height displays your image size in pixels. If you uploaded a properly sized image, these values should not be adjusted.
  2. Most images should be aligned on the right. From the Class dropdown, select align-right.
  3. Click Ok to add it on the page.

Note: Aligning the image should be done using the Class dropdown in the insert/edit image pop-up, not the Advanced tab. For alignment, you can select align-right or align-left. Vertical and horizontal spacing (padding) is automatically added; any horizontal or vertical spacing you add will be removed when you submit the page.

Adding a caption to an inline image

  1. Using the Editor content type, put your cursor where you want the image to go.
  2. If there is already text in the editor, hit Return.
  3. Insert the image.
    1. If the photo is the first thing you have inserted, highlight it and select Paragraph from the Formats > Blocks menu.
  4. Hit Shift + Return to insert a line break.
  5. Type the text for the caption.
  6. Highlight the text and select Caption from the Formats > Custom menu.

Note: If your text needs to be on two lines, type it all out in one line, format it as Caption, and then hit Shift + Return to break it into two lines.

  1. Click on the image and click the small p next to Path: at the bottom of the editor. This will select the image and the caption.
  2. In the Formats > Custom menu, select align-right. This will pull the image and caption to the right side of the editor.

If you entered the photo and caption before any other text, hit Return, and then use the Clear Formatting tool to remove the Caption and align-right formatting. Then add content as you normally would.

Text reads: Adding an inline image with caption
Adding an Inline Image with Caption

This video demonstrates how to add a caption to an inline image in the WYSIWYG editor and align both the image and caption to the right.

Please note: this video has no sound.