The Caption dialog creates caption boxes on images with options for text color, padding and alignment and caption container margin, padding, background color and border styling.
In its simplest form, this consists of a parent <span> wrapped around the source image and an additional text <span>, eg:
<span class="wf_caption" style="max-width: 300px; display: block; width: 100%; border: 1px solid #000000; background-color: #eeeeee;">
<img alt="flower" src="https://cdn.joomlacontenteditor.net/images/nature.jpg" />
<span style="text-align: center; display: block;">Nature</span>
</span>
Example:
Nature
Captions Interface
The Captions dialog contains two tabs - Text and Container.
The Preview area, which shows a simple preview of the styled caption, is displayed in both tabs.
Text tab
The Text tab contains options for setting and formattin the caption text.
Text
Set the caption text.
When the dialog is first opened to create a new caption, this field will be filled with the image's alt or title attribute value.
Position
The position of the caption text. The text can be placed at the top or the bottom of the caption. The default position is Bottom.
Alignment
The alignment of the caption text - Left, Right or Centre.
Colour
The colour of the caption text. Type in a hex value, eg: #cc0000 or select a colour using the colour picker.
Background
The background colour of the caption text area. Type in a hex value, eg: #cc0000 or select a colour using the colour picker.
Padding
Set the padding around the caption text. When the Equalize box is checked, setting one value will set all the others with the same value.
Margin
Set the margin around the caption text. When the Equalize box is checked, setting one value will set all the others with the same value.
Classes
Select css classes from your template stylesheet to apply to the caption text. Additional class names, seperated by a space, can be typed into the field.
Container Tab
Alignment
The alignment of the caption container relative to the surrounding content.
When the dialog is first opened to create a new caption, this field will reflect the image's existing alignment.
Background
The background colour of the caption container. Type in a hex value, eg: #cc0000 or select a colour using the colour picker.
Padding
Set the padding around the caption container. When the Equalize box is checked, setting one value will set all the others with the same value.
Margin
Set the margin around the caption container. When the Equalize box is checked, setting one value will set all the others with the same value.
When the dialog is first opened to create a new caption, these fields will be filled with the image's existing margin styles, if any.
Border
Set the caption container border styles by checking the checkbox and selecting a Width, Style and Colour.
Classes
Select css classes from your template stylesheet to apply to the caption container. Additional class names, seperated by a space, can be typed into the field.
Preview
Changes made to most fields in the Text or Container tab will be reflected in the Preview area at the bottom of the dialog. This provides a simple example of what the caption will look like in the editor content.
Creating a Caption
Captions can be created on images and on media (audio, video) placeholders. The Caption buttons are disabled until an image or placeholder is selected in the editor.
To create a caption
- Select and image or media placeholder in the editor
- The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
- Some fields will be filled with some of the image properties
- The Text field in the Text tab will be filled with the image alt or title attribute value
- The Alignment in the Container tab will be selected based on the image's alignment.
- The Margin fields in the Container tab will be filled with the image's margin styles, if any.
- Set the Text and Container options as required. A preview of the caption will be displayed in the Preview section of the dialog.
- Click the Insert button to create the caption.
The caption text can be edited as normal in the editor. For example in the animation below, after the caption has been created, the caption text is selected and an italic format is applied.
To edit a caption
- Click on the image that has the caption in the editor.
- The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
- Edit the caption properties as required.
- Click on the Update button to update the caption and close the dialog.
To delete a caption
- Click on the image that has the caption in the editor.
- The Delete Caption button will become enabled. Click the button to delete the caption.
