Custom image captions

Image captions are a great way to explain what you are demonstrating in an image or to call out what you wish to have readers focus on.

The steps for adding captions to images differ depending on whether you're using the Modern Editor or Legacy Editor.

Modern Editor

In the Modern Editor, simply click on the image to open the image editing pop-up and then click the dialog bubble to add a caption:
Screenshot of the Image Caption button in Modern EditorImage Caption button in the Modern Editor

This creates the image caption area and you can type in the caption you'd like.

Styling Modern Editor captions differently

To style the captions used in Modern Editor differently across your knowledge base:

  1. Go to Settings > Style.
  2. Below the Preview pane, be sure Custom CSS is selected.
  3. Copy the default CSS below and paste it into your Custom CSS.
    .documentation-article .fr-img-caption .fr-img-wrap>span {
        margin: auto;  /*change the margins*/
        font-size: 14px; >/*change the font-size*/
        font-weight: initial;/*font bold/not bold*/
        max-width: 100%; /*How much of the image's width should the caption take up?*/
        background: #656565; /*Background color for the caption*/
        border-radius: 0px 0px 4px 4px; /*Border-radius creates rounded corners*/
        padding: 5px; /*Padding between the text and the edge of the caption*/
        color: #fff; /*Text color*/
        line-height: 1.72222; /*Line height*/
    }
  4. Adjust the CSS however you see fit.
  5. You can Preview your changes. Just be sure to Save once you're done making them!

Legacy Editor

The Modern Editor has a function to add captions to images. This tutorial explains a method to add your own captions using HTML and is primarily targeted towards people using the Legacy editor. 

Setup

The setup for image captions will require you to delve into the HTML source code of your document. But don't worry--we provide what you need below, so you can copy and paste it without having to write HTML from scratch.

  1. Start by uploading the image you wish to add a caption to.
  2. With the image uploaded, right-click on it.
  3. Click on Image Properties.
     Screenshot showing the image right-click menu with a callout to the Image Properties option
    Image Properties option in image right-click menu
  4. In the pop-up that appears, if the Width and Height fields are blank, click the refresh arrow next to height and width. (If they aren't blank, skip to step 7.)
    Screenshot showing the Image Properties pop-up, with a callout to the refresh arrow next to the Width and Height
    The image size refresh arrow
  5. This will generate the default height and width for the image. You can leave these as-is or adjust them to your liking. Click OK when you're done adjusting.
    Screenshot showing the height and width populated
    Height and Width added
  6. With the image added with height and width, click the Source button in the editor toolbar.
    Screenshot of the Legacy Editor with a callout to the Source button in upper left
    Legacy Editor Source button
  7. Find your uploaded image in the HTML. It will begin with<img class=:
    Screenshot showing a sample of the Source view of an image
    Sample image HTML in Legacy Editor
  8. Copy and paste the below HTML in just before the image's HTML:
    <div class="img-and-caption">
    The end result will look like so: Screenshot showing the img-and-caption div in the HTML
    Image HTML with img-and-caption div added before it
  9. If the img is in a paragraph (as ours is in this screenshot), remove the <p> and </p> tags before and after it:
    Screenshot showing the same img-and-caption div and img HTML but with paragraph opening and closing tags removed
    Same code as above, but with <p> and </p> tags before and after the img removed
  10. You should see the width of the image at the very end of the image's HTML. Depending on how you've edited things, it will either say width="number" or style="width: number;":
    Screenshot of the width setting of the image in HTML
    Sample image width setting
  11. For the image caption, copy and paste the below HTML in after the image's HTML.
    <div class="img-caption" style="width: 500px;">Your Caption Here.</div>
    </div>
    1. Replace Your Caption Here with the caption text you wish to use.
    2. Replace the 500px in the width statement with the width in your image's HTML.
      Here's a sample with the width set to match my image, and a caption of "My sample caption":
      Screenshot of a complete image with caption HTML
      Completed sample of image with caption

Style your captions

This won't look like much until we add some styles for the img-and-caption and the img-caption divs we just added. To do so:

  1. Go to Settings > Style.
  2. Under the preview pane, be sure you're in the Custom CSS tab.
  3. Copy the code below and paste it into your Custom CSS. This CSS can be customized as you desire to get the right look and feel for your knowledge base!
    /* Format the caption itself: text alignment, padding, color = font color; border-radius sets slight curve; font-size sets font size */
    .img-caption {
      text-align: center;
      padding: 5px 0;
      color: #fff;
      background-color: #333;
      border-radius: 0 0 4px 4px;
      font-size: 14px;
    }
    
    /* Add a border below the entire img-and-caption div */
    .img-and-caption {
      margin-bottom: 30px;
    }
    
    /* Format images with captions to have no bottom-margin, no box shadow, a thin border around the sides and top, and curved corners */
    .hg-article-body .img-and-caption img {
       margin-bottom: 0 !important;
       box-shadow: none;
       border: 1px solid #ddd;
       border-bottom: none;
       border-radius: 4px 4px 0 0;
    }

These styles, applied to our original sample, will produce a caption like this:
Screenshot of the original image with the styled caption, which is white text on a dark grey backgroundSample styled caption