Web services

Captions

About this component

Captions are a good way to provide context or fine print to an image (such as a photo credit or briefly describing what is in the photo). Images of any size or alignment can have a caption.

Styling

Try to keep captions short, one or two sentences. Captions appear below the image they describe, and the text is slightly smaller, lighter gray, and italicized. They can include a link but not other text formatting options.

How to use for Captions

Adding a caption is a bit finicky. Here’s how to do it:

  1. Add an image to your page or post like you would normally.
  2. Click on the image, then click the pencil “Edit” icon in the little menu that pops up.
  3. Add your caption in the “caption” box near the top of the “Image details” window.
  4. Click the “Update” button. Your caption should now show below the image.

Note: It’s possible to add a link to a caption, but it has to be HTML in the “caption” field.

Development info for Captions

Stylesheet location: /_source/styles/components/_images.scss 

<div class="any-size-class any-alignment-class">
  <img src="" alt="" />
  <p class="wp-caption-text"></p> <!-- optional inside the <p> link -->
</div>
Example of Captions
Cat

alignright size-percent-50

Because this image is 50% width and aligned to the right, the text will flow around it on the left. If the text is long enough to wrap around the bottom of the image, the text will return to stretching all the way across the page.

Because the image below in this example is 100% width, the text won’t wrap around the image on either side.

Cat

aligncenter size-percent-100

Any text below the 100% width image with a caption will appear fully below the image.

Related components