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. For example, the below image captions describe what is happening behinde the scenes in a SurveyGizmo survey.

Setup

The set up for image captions will require you to delve into the HTML source code of your document. Don't worry though, it's as easy as copying and pasting!

Start by uploading the image you wish to add a caption to. Once the image is uploaded to your article click the Source button in the editor toolbar. 

Find your uploaded image in the HTML. It will look like so:

Copy and paste the below HTML to precede the image:

<div class="img-and-caption">Image HTML

The end result will look like so:

<div class="img-and-caption"><img class="img-responsive" height="279" src="//dyzz9obi78pm5.cloudfront.net/app/image/id/553fb3597cb82993327b23dd/n/2015-04-28_1020.png" width="409" />

Now, for the image caption, copy and paste the below HTML (also in the source code) and replace "Your Caption Here" with the caption text you wish to use. 

<div class="img-caption">Your Caption Here.</div>

Finally, copy and paste the below HTML for a closing div to wrap everything up:

</div>

Next, you'll need to specify a width for your caption so that it aligns with your image. You'll need to look at your the HTML for your image itself to find the width.

If no width displays simply go back to the visual view of your article and adjust the image a bit by clicking and draging the corner. This will insert a width in the HTML of the image. It will look like the following:

Once you have your image width, it's as easy as pasting the below HTML inside your img-caption div. 

style="width: 409px"

The end result will look like so:

<div class="img-and-caption">

<img class="img-responsive" height="279" src="//dyzz9obi78pm5.cloudfront.net/app/image/id/553fb3597cb82993327b23dd/n/2015-04-28_1020.png" width="409" />

<div class="img-caption" style="width: 409px">Question Value Merge Code when value is present.</div>

</div> 

The final step is to add some CSS to make this look pretty! Copy and paste the below CSS under Settings > Style in the Custom CSS field. This CSS can be customized as you desire to get the right look and feel for your knowledge base!


.img-caption {
  text-align: center;
  padding: 5px 0;
  color: #fff;
  background-color: #333;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
}

.img-and-caption {
  margin-bottom:30px;
}

.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;
}