department menu

Captioned Images

What is a caption?

A captioned image is an image that has a description displayed underneath it.

In OU Campus this renders like a dark grey angled text area with some teal stripes above it:

page layout

The current CSUSM webpage layout is split into three columns.

 
 

Captions are currently capped at 90 characters (roughly two lines long). If the caption character cap is too short, please give that feedback to web@csusm.edu and the Web Team will consider lengthening it.

When to use a Caption?

Captioned images should be succinct and clearly identify the subject of the image being displayed. Captioned images should not be clickable and are purely for giving context of the image.

How to make a Captioned Image in OU Campus

  1. Upload the image you want to caption to OU Campus.
  2. Add in a Layout Snippet to your page dedicating one of the table columns to hold the image. 
    For Advanced users - if you add in an image that is floated, you can also apply a caption to that image.
  3. Embed the image to the area within the Layout Snippet.
  4. Add in some short but descriptive alternative text into the Description field.
  5. In the Insert/Edit Image pop-up, type in a short caption into the Tooltip field. This will render as your caption if all steps are followed correctly.
  6. Select Image Caption from the Class drop down
  7. Click OK.
  8. Your caption should now render!

 FAQs:

  • My caption is not rendering - why is this?

     There are two possible reasons why your caption is not rendering:

    Potential Reason 1: Your caption is not in a layout snippet.

    ALL captions must be inside of a layout snippet or floated, if a more advanced user. Captions are specifically designed not to span across an entire page like a banner and are programed to not allow this behavior.

    Potential Reason 2: You did not set the caption's class.

    Captions will only render if both the Tooltip and the Class drop down are selected correctly. (Please note: The description field is also required to activate the OK/Save button).

    Double check that the "Image Caption" has been selected from the Class dropdown and see if that fixes the issue.


Back to All Guides