Images can have a caption directly below them to provide reference information or attribution to the image.

To add a caption to an image in content:

  1. Click the 'Insert Image' icon in the WYSIWYG to add an image.
  2. In the modal window that appears, tick the 'Captioned image' checkbox.
  3. When the image is inserted, a caption will display below it that can be edited like any other text.

Captioned images use the <figure> and <figcaption> markup. This is the correct way to add a caption to an image so that semantically, the browser knows that caption refers to that particular image.

Putting a paragraph of text below an image will not have the same caption association.

Aligning captioned images

Captioned images can be aligned left or right using the text align options in the wysiwyg. However, the center align option will not work as it does for text. Instead you need to add the class align-center to the <figure> using the Source view.