Wiki

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.

2323343344-img-dialog.png

View your awesome caption

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

2096185878-caption.png

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

954558955-permalink.png

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

2692802690-lookandfeel.png

2. Click on the Stylesheet Tab

3599389727-stylesheet.png

3. Edit the Stylesheet

3012333798-edit.png

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

Recipes

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.

default-preview.png|

Semi-transparent overlay

transparent.png

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

confluence-embedded-file-wrapper.confluence-caption-wrapper{
    position:relative;
}

.confluence-image-caption{
    position: absolute;
    bottom: 0px;
    background: rgba(16,16,16,0.5);
}

Super Basic Captions

simple.png

Add the following to your stylesheet

.confluence-image-caption{
    text-align: center;
    background: transparent;
    font-weight: bold;
    font-style: italic;
    color: black;
}

Polaroid Style Caption with Handwriting font

polaroid.png

Add the following to your stylesheet

@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

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

.confluence-image-caption{
    text-align: center;
    background: transparent;
    color: black;
    font-family: 'Shadows Into Light', cursive;
    font-size: 16px;
}

Updated