Image with Caption Component

The image caption component makes it easy to include captions with images. The component also provides the option to open the image in a full-screen lightbox with a zoom icon overlay.

When to use the Image with Caption component

Use this component when an image on your web page requires a visible caption.

The component can also open an image within a full-screen lightbox, providing users with the option to zoom or enlarge the image when clicked.

Usability guidance

This component outputs the image and caption in a format optimized for screen readers. 

If you only want to use the lightbox feature of the component, the image caption is optional.

Place the component inside a column snippet or float box snippet for different layout options.

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like to place an image.
  3. From the toolbar, select the component icon  Snippet icon , which resembles an atom symbol.
  4. From the list of components, select the Image with Caption component.
  5. Fill in the required fields and select your options.
  6. Save and preview.

 

Image with Caption (no lightbox):

Stockton in the Fall
Choose from different two different image borders as well as a polaroid style backdrop.

Image with Caption (with lightbox and zoom icon)

Stockton in the Fall
Overlay a zoom icon in the center or right corner of the image when using the lightbox option. Captions are optional.