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 OU Campus 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 emich.edu 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 OU Campus.

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

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

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

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

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 OU Campus.

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 OU Campus.

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

7. Before you use the image on your site, you must publish it. Hover over the image in the list. The row will turn grey and options will appear to the right. Hover over "Publish," then click "Publish" in the drop-down.

A screenshot of the Publish image option in OU Campus.

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 OU Campus.

 

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 OU Campus 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 OU Campus.

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 OU Campus 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 OU Campus. 

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

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

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 OU Campus.

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

A screenshot of the OK button in the insert image window in OU Campus.

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 OU Campus.

10. Once the image and optional caption are inserted, click "Save and Exit" in the top-left corner of the OU Campus edit toolbar. A screenshot of the Save And Exit icon in the OU Campus edit toolbar.

Below is an example of a captioned image.

A picture of a dog sitting outside in snowy weather.
This dog is adorable and very photogenic.
A picture of a dog sitting outside in snowy weather.

This dog is adorable and very photogenic.

 

 

 

 

 

 

 

 

 

Have More Questions?

Request Help

Skip Section Navigation