The Easy Image Caption CK 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.
Examples / Demo
Here are 3 example of how you can add the caption to your images using the Joomla plugin Easy Image Caption CK. After the demo you will get the HTML code to explain how it works, what is the original code that you must put in your page, and what is the rendered code which is processed by the plugin. Here is the demo to see how it looks like :
Image by Bessi (pixabay.com) Demo image 1: This is the image caption, styled through the plugin parameter settings Demo image 2: Captions can also be placed above the image, with the copyright info below 
Image by David Bartus (pexels.com) 
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.
Demo 1 HTML
<!-- Original code -->
<img src="images/sample-image-1.jpg" alt="sample image 1" width="40%" data-copyright="Image by Bessy (pixabay.com)" title="Demo image 1: This is the image caption, styled through the plugin parameter settings" />
<!-- After processing by Easy Image Caption CK, 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 Bessy (pixabay.com)Demo 2 HTML
<!-- 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 David Bartus (pexels.com)" title="Demo image 2: Captions can also be placed above the image, with the copyright info below" />
<!-- After processing by Easy Image Caption CKDemo 3 HTML
<!-- 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=https://www.deviantart.com/ld345/art/Beautiful-blur-bright-326055-785629211]link to the image source[/url] or [b]bold text[/b]. This caption is styled through external CSS." />
<!-- After processing by Easy Image Caption CK
How It Works
Easy Image Caption CK works out-of-the-box. Everything is automatic once the plugin is enabled.
After installation through Joomla’s extension manager, you will have to enable it. Then all your article images will automatically show captions on front-end pages if they have a title or alt attribute. You can however restrict “captionizing” to certain images or certain articles through the plugin parameters : apply in blog or not, exlude article, apply only on the selected articles and more.
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.
How can I add HTML code to my captions?
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 Easy Image Caption CK. 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.
History of the plugin
This is the fork, or "reborn" of the EasyImageCaption plugin for Joomla from Thomas Römer. He decided to stop the development of his plugin at Joomla 3. Some users requested a reborn of this extension and JoomlaCK decided to do it. After getting the consent of the author, this plugin is now called Easy Image Caption CK and has been developped to be compatible with Joomla 4.
Download Easy Image Caption CK
News