The EasyImageCaption plugin for Joomla generates captions from article images’ title or alt attributes and displays them below (or above) the images. An optional data-copyright attribute can be used to display copyright or license information for the image next to the caption.
The page you are looking at right now is not powered by Joomla, but the following images give you an impression of how the captions (and their HTML) will look like.
<!-- Original code -->
<img src="images/sample-image-1.jpg" alt="sample image 1" width="40%" data-copyright="Image by Ed Gregory (stokpic.com)" title="Demo image 1: This is the image caption, styled through the plugin parameter settings" />
<!-- After processing by EasyImageCaption, using style definitions from plugin parameters -->
<span class="easy_img_caption" style="display:inline-table;max-width:100%;box-sizing:border-box;vertical-align:top;background-color:#454F4D;padding:0px 0px 0px 0px;width:40%;margin:10px 20px 20px 0px;">
<img src="images/sample-image-1.jpg" alt="sample image 1" style="width:100%;margin:0;" data-copyright="Image by Ed Gregory (stokpic.com)" title="Demo image 1: This is the image caption, styled through the plugin parameter settings" />
<span class="easy_img_caption_inner" style="display:block;">
<small style="display:block;color:#99A6A3;font-size:14px;line-height:1.3;font-weight:normal;font-style:italic;text-align:right;padding:5px 10px 0px 10px;margin:0px;">Image by Ed Gregory (stokpic.com)</small>
<span style="display:block;color:#ffffff;font-size:17px;line-height:1.3;font-weight:normal;font-style:normal;text-align:left;padding:10px 10px 10px 10px;margin:0px;">Demo image 1: This is the image caption, styled through the plugin parameter settings</span>
</span>
</span>
<!-- Original code -->
<img src="images/sample-image-2.jpg" alt="sample image 2" style="width:40%;margin:10px 0px 20px 0px;" data-copyright="Image by Dan Cooper (stokpic.com)" title="Demo image 2: Captions can also be placed above the image, with the copyright info below" />
<!-- After processing by EasyImageCaption, using style definitions from plugin parameters -->
<span class="easy_img_caption" style="display:inline-table;max-width:100%;box-sizing:border-box;vertical-align:top;background-color:#454F4D;padding: 0px 6px 0px 6px;width:40%;margin:10px 0px 20px 0px;">
<span class="easy_img_caption_inner easy_img_caption_inner1" style="display:block;">
<span style="display:block;color:#ffffff;font-size:17px;line-height:1.3;font-weight:normal;font-style:normal;text-align:left;padding:6px 0px 6px 0px;margin:0px;">Demo image 2: Captions can also be placed above the image, with the copyright info below</span>
</span>
<img src="images/sample-image-2.jpg" alt="sample image 2" style="width:100%;margin:0;" data-copyright="Image by Dan Cooper (stokpic.com)" title="Demo image 2: Captions can also be placed above the image, with the copyright info below" />
<span class="easy_img_caption_inner easy_img_caption_inner2" style="display:block;">
<small style="display:block;color:#99A6A3;font-size:14px;line-height:1.3;font-weight:normal;font-style:italic;text-align:center;padding:6px 0px 6px 0px;margin:0px;">Image by Dan Cooper (stokpic.com)</small>
</span>
</span>
<!-- Original code -->
<img src="images/sample-image-3.jpg" alt="sample image 3" class="demo-img" title="Demo image 3: Captions may even include HTML code, i.e. a [url=http://stokpic.com/project/beautiful-english-landscape-with-fields-and-colors/]link to the image source[/url] or [b]bold text[/b]. This caption is styled through external CSS." />
<!-- After processing by EasyImageCaption, with internal styling disabled -->
<span class="easy_img_caption demo-img" style="display:inline-table;max-width:100%;box-sizing:border-box;vertical-align:top;">
<img src="images/sample-image-3.jpg" alt="sample image 3" class="demo-img" title="Demo image 3: Captions may even include HTML code, i.e. a link to the image source or bold text. This caption is styled through external CSS." style="width:100%;" />
<span class="easy_img_caption_inner" style="display:block;">
<span style="display:block;">Demo image 3: Captions may even include HTML code, i.e. a <a href="http://stokpic.com/project/beautiful-english-landscape-with-fields-and-colors/" target="_blank">link to the image source</a> or <b>bold text</b>. This caption is styled through external CSS.</span>
</span>
</span>
EasyImageCaption works out-of-the-box. After installation through Joomla’s extension manager, you just have to enable it, and all your article images will automatically show captions on front-end pages. You may however restrict “captionizing” to certain images or certain articles through the plugin parameters.
The generated source code is 100% valid HTML5 for maximum browser compatibility and smooth integration into your website. Captions will also work on responsive websites (depending on your template, you may have to add some additional CSS).
The captions can be styled individually through your template’s CSS file(s) or through the built-in basic style settings.
This plugin is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This plugin is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU General Public License for more details.
Download v0.52 (for Joomla 1.6+)
It is not possible to write HTML tags directly into your image’s attributes. But you can use special tags (similar to BBCode) that will get converted to HTML tags by EasyImageCaption. The following table lists all supported tags.
In order to use this feature, you have to enable the parsing of tags in the plugin parameters.
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 |
[url2]www.example.com[/url2] | <a href="http://www.example.com" target="_blank">www.example.com</a> www.example.com |
[url2=www.example.com]Click here[/url2] | <a href="http://www.example.com" target="_blank">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 line[br]Next line | First line<br />Next line First line Next line |
*The effect of [url] und [url2] can be switched in the plugin options.