Wiki
Clone wikiconfluence-image-captions / Home
If you came here from Google, here is the plugin this documentation refers to
Confluence Image Captions Plugin Documentation
- Quick Start
- View Your Awesome Caption
- I Want to Link to my Captioned Image
- But I hate the Style of Caption you've created
- 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:
- Select the image in the editor.
- Click on the Properties button.
- In the Image Properties dialog, select the Title panel.
- Select the checkbox that says Display the Image's Title as a Caption.
- Add your desired caption as the Image's Title.
- 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.
I Want to Link to my Captioned Image
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
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.
|
Semi-transparent overlay
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
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
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