Adding the Captioned Image Snippet

The captioned image snippet is the one you will use most often to add an image to your site. This snippet does not have specific image dimension requirements, but it will not allow you to add large images to your site. This snippet will auto-format the image to the right side of the page. If you add captioning, it will appear, but if you do not, the space will not show on the published web page.

If the image you want to add is not already published to your webpage, you first will need to upload the image to Modern Campus CMS and publish it. Make sure your image meets University guidelines for images, then follow the steps below. If your image is already uploaded and published in the images folder, skip to the "Step-by-Step Instructions for Adding the Captioned Image Snippet" section on this page.

Step-by-Step Instructions for Uploading an Image

The only image types allowed on sites are .jpg, .jpeg, .gif and .pngs. Please convert your file into the appropriate file type and name it appropriately.

File naming conventions:

  • NO uppercase letters
  • NO spaces (instead of spaces, use a hyphen [-] between words)
  • NO dates in the file name

Images are stored in a folder called "images". This folder can be found under the "Content" tab in Modern Campus CMS.

1. From the content tab, navigate to the images folder.

A screenshot of the Content tab and Images folder in Modern Campus CMS.

2. Click the upload button in the top-right of the page.

A close-up screenshot of the upload button in Modern Campus CMS.

3. The upload window is displayed. Click the add file button to select your image(s).

This is a screenshot of the upload image window in Modern Campus CMS.

4. Select the image(s) you want to upload and click the "open" button.

A screenshot of the file selector for choosing an image.

5. Click the "Start Upload" button.

 A screenshot of the Start Upload button in Modern Campus CMS.

6. The image is now uploaded in the images folder.

7. Before you use the image on your site, you must publish it. Click on the image in the list. The row will turn grey and you can click on the three dots to the right. Click "Publish," then click "Publish" in the drop-down.

A screenshot of the Publish image option in Modern Campus CMS.

8. A second window will pop up. Click the "Publish" button. Now your image is ready for use on your page.

A screenshot of the Publish button in Modern Campus CMS.


Step-by-Step Instructions for Adding the Captioned Image Snippet

1. From an editable region on the page, click the insert snippet button on the edit toolbar.

A screenshot of the insert snippet button in the Modern Campus CMS edit toolbar.

2. The "Choose Snippet" pop-up window is displayed. Select the captioned image snippet, then click the insert button in the bottom-right.

 A screenshot of the choose snippet window in Modern Campus CMS.

3. After clicking "Insert," the Captioned Image snippet will appear in the editable field of the page in OU Campus. Click into the "Image" section.

A screenshot of the captioned image snippet telling user to click into the image section before adding an image.

4. Insert the desired image with the "Insert/Edit Image" button in the OU Campus edit toolbar. 

A screenshot of the insert image button in the Modern Campus CMS edit toolbar.

 5. In the "Insert/Edit Image" window that pops up, click the select image button to the right of the "Source" field. 

A screenshot of the image selector button in the inser image window in Modern Campus CMS. 

 6. After selecting your image from the images folder, click the "Insert" button.

 A screenshot of the insert button after selecting the image in Modern Campus CMS.

7. Next, you need to add a description to the image. The description provides accessibility options for users with visual disabilities. A description should be a full sentence detailing what the image is displaying. See the example below.

A screenshot of an example of an image description in Modern Campus CMS.

8. Once your description is entered, click "SAVE" in the bottom-right of the window to add the image to the page.

9. If you want to add a caption to the image, type the caption in the "Caption" field of the Captioned Image snippet.

A screenshot of an image and caption text ready to be published in Modern Campus CMS.

10. Once the image and optional caption are inserted, click "Save and Exit" in the top-left corner of the Modern Campus CMS edit toolbar. 

A screenshot of the Save And Exit icon in the Modern Campus CMS edit toolbar.

Below is an example of a captioned image.

An example of a captioned image.

Have More Questions?

Request Help

Skip Section Navigation