Installation
Download the ZIP file and use it with Joomla's extension installer. Then activate the plugin on the plugin page. That's it.
If you want to update EasyImageCaption, you have to uninstall the old version first and then install the newer one. Note that your parameter settings will get lost upon uninstalling.
Parameter settings
EasyImageCaption provides a lot of parameters:
Plugin Parameters
- Hide captions: Do not generate captions in certain views: on the frontpage, in blog view or in both.
- Apply plugin to articles...: Apply the plugin either to all articles or to none of them. Exceptions can be defined in the following fields.
- Except articles (id): Define the ids of articles you wish to except from the above rule "Apply plugin to article..." (separate ids by comma).
Except articles of these categories (id): Define the ids of categories whose articles you wish to except from the above rule "Apply plugin to article..." (separate ids by comma).- Except articles of these sections (id): Define the ids of sections whose articles you wish to except from the above rule "Apply plugin to article..." (separate ids by comma).
- Apply plugin to images...: Apply the plugin either to all images of an article or to none of them (only if the plugin is applied to that article at all). Exceptions can be defined in the following fields.
- Except images with or within these classes: Define CSS classes that except images from the above rule "Apply plugin to images..." The class may belong to the image itself or to a parent element in the HTML tree (separate classes by comma).
- Except images with or within these ids: Define CSS ids that except images from the above rule "Apply plugin to images..." The id may belong to the image itself or to a parent element in the HTML tree (separate ids by comma).
- Do not apply to images narrower than (px): Define the minimum width of images to have a caption. That keeps small buttons and icons "caption-free".
- Use this tag: Select what tag content to use as the image caption – the image's ALT or TITLE tag.
- Copy image's classes: If set to "Yes" all CSS classes belonging to the image will be copied to the new surrounding container element. This allows better individual formatting of the images through external CSS files.
- Parse tags: The caption string may be further formatted by using special tags (similar to BBCode). These tags will be converted into regular HTML tags. Choose "Always" to perform the conversion on every image or "Only for following images", if you want to limit it to certain images, defined in the following parameter. The table shows all available tags.
- Parse tags for images with these classes: This parameter is only recognized when choosing "Parse tags: Only for following images" above. Parsing is limited to images with CSS classes defined here.
| Formatting tag in caption | HTML output |
|---|---|
| [url]www.example.com[/url] | <a href='http://www.example.com'>www.example.com</a> www.example.com |
| [url=www.example.com]Click here[/url] | <a href='http://www.example.com'>Click here</a> Click here |
| [b]Bold example[/b] | <b>Bold example<b> Bold example |
| [i]Italic example[/i] | <i>Italic example<i> Italic example |
| [u]Underlined example[/u] | <u>Underlined example<u> Underlined example |
| First paragraph[br]Next paragraph | First paragraph<br />Next paragraph First paragraph Next paragraph |
Compatibility with other caption solutions
- Force Joomla! captions: Use this compatibility option, if you use the images' ALT tag for "captionizing" but also want EasyImageCaption to handle captions you have already added via the standard image button below the WYSIWYG editor (Joomla's captions are stored in the TITLE tag). Do not forget to disable Joomla!'s javascript (see Compatibility advice).
- Handle existing JCE captions: If you have already added captions via JCE's caption plugin, you have to decide how EasyImageCaption should handle them. They can either be replaced by the plugin's code or stay untouched.
- JCE tooltip fix: When using JCE's tooltip function, the editor automatically adds a double colon (::) to the TITLE tag as control characters. If this parameter is set to "Yes", these colons will not be shown in captions.
Caption styling
Caption position: Define whether to show the caption below or above the image.- Expand width of picture box (px): If you want the wrapping container to be larger than your images you can set the amount of pixels here.
- Internal styling: You may style the picture box generated by EasyImageCaption by using the following basic styling options. For advanced styling you should turn off the internal styling and use your template's CSS file instead.
- Background color (hex): Define the background color for your captions in hexadecimal notation. This setting is used only if the internal styling is turned on.
- Text color (hex): Define the text color for your captions in hexadecimal notation. This setting is used only if the internal styling is turned on.
- Caption text size (pt): Define the text size for your captions here. This setting is used only if the internal styling is turned on.
- Bold text: Select whether the captions should be displayed in bold. This setting is used only if the internal styling is turned on.
- Italic text: Select whether the captions should be displayed in italics. This setting is used only if the internal styling is turned on.
- Text align: Select the alignment of the caption. This setting is used only if the internal styling is turned on.
- Vertical space for text (px): Define the space above and below the caption text. This setting is used only if the internal styling is turned on.
- Horizontal space for text (px): Define the space left and right of the caption text. This setting is used only if the internal styling is turned on.
- Vertical space (px): Define the space above and below the whole picture box. This setting is used only if the internal styling is turned on.
- Horizontal space (px): Define the space left and right of the picture box. This setting is used only if the internal styling is turned on.
- Reset image margins: If set to "Yes", the MARGIN property of the image is set to 0. This setting is used only if the internal styling is turned on.
Compatibility: JoomGallery's JoomPlu plugin
- Expand width of picture box (px): This is a compatibility option for JoomGallery's JoomPlu plugin. You may set the width of EasyImageCaptions picture box for JoomPlu images separately, because those images usually have an additional border.
Compatibility advice
If you are using EasyImageCaption and there are also images with standard Joomla! captions on your site, you have to remove the link to the 'caption.js' script file to deactivate Joomla!'s javascript caption solution.
To do this, add the following PHP code to the top of your template's 'index.php' file:
<?php //Remove 'caption.js'
$header_data = $this->getHeadData();
reset($header_data['scripts']);
foreach($header_data['scripts'] as $key=>$value) {
if(strpos($key, 'caption.js')) {
unset($header_data['scripts'][$key]);
}
}
$this->setHeadData($header_data); ?>
$header_data = $this->getHeadData();
reset($header_data['scripts']);
foreach($header_data['scripts'] as $key=>$value) {
if(strpos($key, 'caption.js')) {
unset($header_data['scripts'][$key]);
}
}
$this->setHeadData($header_data); ?>