Skip to main content

Add Captions to Images

Follow the steps below to add a caption to an image floated within the WYSIWYG:  

  1. Click the Insert/edit image button in the WYSIWYG toolbar. Choose the image and enter Image Description (alt/text) per usual.
  2. Under the Advanced tab, check “Use Figure/Caption” checkbox and click OK.

  3. You will have a caption field below the image. Highlight and change the image caption as you wish.

  4. While still in the caption area (make sure your curser is clicked in the caption box), go to Formats > Custom and select one of the horizontal, portrait, or vertical image options.

  5. Next, go to the source code (look for <> icon on your WYISWYG tool bar), search for “figure” tag and make sure the entire snippet for <figure> tag is arranged in the order below:

    <figure class="portrait-image-right">
    <img alt="" class="" height="284" src="/images/female-placeholder-image.jpg" width="243" />
    <figcaption>This is a placeholder image</figcaption>

    To do this, you will have to cut class="portrait-image-right" from the <img> tag and replace class=”image” in the <figure> tag with it. <figure> tag should only have one class attribute.

Examples of Image Captions

Portrait Caption Class

Image showing vertical image left caption class. Can also be vertical image right. Max width can be 240px.

Vertical Caption Class

This is a portrait image right caption class. Can also be portrait image left. Max width can be 170px.

Horizontal Caption Class

This is a horizontal image right. Can also be horizontal image left. Max width can be 335px.