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:
Image 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

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.
    
   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.)
   
   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.
   
   Height and Width added
6. With the image added with height and width, click the Source button in the editor toolbar.
   
   Legacy Editor Source button
7. Find your uploaded image in the HTML. It will begin with<img class=:
   
   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: 
   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:
   
   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;":
    
    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":
       
       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:
Sample styled caption