Clone wiki

confluence-image-captions / Home

If you came here from Google, here is the plugin this documentation refers to

Confluence Image Captions Plugin Documentation

  1. Quick Start
  2. View Your Awesome Caption
  3. I Want to Link to my Captioned Image
  4. But I hate the Style of Caption you've created
  5. Recipes

This is the documentation for Confluence Image Captions. A nice easy way to add captions to images in Confluence.

Quick Start

To add a caption to an image in Confluence:

  1. Select the image in the editor.
  2. Click on the Properties button.
  3. In the Image Properties dialog, select the Title panel.
  4. Select the checkbox that says Display the Image's Title as a Caption.
  5. Add your desired caption as the Image's Title.
  6. Close the dialog and save the page.


View your awesome caption

Nothing else to do but see the caption on the image when you view the page.


Hover over the text and you will see and anchor icon appear. This is the permalink to the caption.


But I hate the style of captions you've created!

Good News! You can use Confluence's Space Stylesheet to customize the look and feel of your captions. I have even created some recipes for you. To use these recipes,

1. Go to Space Tools->Look and Feel


2. Click on the Stylesheet Tab


3. Edit the Stylesheet


4. Copy and paste css from the Recipes section below to the end of the stylesheet


Default Style

This is here for comparison purposes. This is what the caption looks like normally. Light text on a dark background. Does not overlap the image at all.


Semi-transparent overlay


To achieve the above effect, add the following to your stylesheet


    position: absolute;
    bottom: 0px;
    background: rgba(16,16,16,0.5);

Super Basic Captions


Add the following to your stylesheet

    text-align: center;
    background: transparent;
    font-weight: bold;
    font-style: italic;
    color: black;

Polaroid Style Caption with Handwriting font


Add the following to your stylesheet

@import url(;

.confluence-caption-wrapper {
    padding: 15px;
    background: #f7f7f7;
    border: 1px solid rgba(16,16,16, 0.1);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.63);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.63);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.63);

    text-align: center;
    background: transparent;
    color: black;
    font-family: 'Shadows Into Light', cursive;
    font-size: 16px;