EasyImageCaption Free Joomla Plugin

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.

Examples / Demo

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.

sample image 1 Image by Ed Gregory (stokpic.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 sample image 2 Image by Dan Cooper (stokpic.com) sample image 3 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.
<!-- 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>

How It Works

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.

If you use EasyImageCaption, please post a rating and a review at the Joomla Extensions Directory.

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.

Version: 1.11
Requires Joomla 3.x
EnglishDeutsch

v1.11 // 2017-03-01

  • Fixed: Bug that causes incorrect width calculation in certain situations (not caused by today's v1.1, but already present in v1.0)

v1.1 // 2017-03-01

  • New: Added another BBCode like tag named "[url2]" besides the already existing [url]. A new option allows you to determine which one of the two creates links that open in a new browser window while the other one opens them in the current window.
  • New: Option to remove the BBCode tags from the attributes after using them for the creation of the caption (default is YES)
  • Fixed: "Deprecated" warning will no longer appear under PHP 7

v1.0 // 2016-06-03

  • Please note: You may have to adjust your styling after updating the plugin from an earlier version.
  • EasyImageCaption is now ready for responsive websites
  • Added the possibility to have image copyright/license information displayed seperately from caption
  • Some parameters added, some removed, some default values changed
  • More CSS properties supported, such as percentage widths or "clear" property
  • Fixed the "double caption" problem
  • Several minor bugs fixed
  • Special compatibility options removed
  • Dropped support for Joomla 1.5, 1.6. 1.7 and 2.5 – Joomla 3.x is the way to go
  • Internet Explorer 7 is no longer supported
  • Started proper version numbering with "EasyImageCaption 1.0"

v0.52 // 2012-05-18

  • Fixed detection of image width
  • Fixed parsing of underline tags [u][/u]
  • EasyImageCaption now works inside custom HTML modules (if "Prepare Content" is set to "Yes") (1.6+ version only)
  • Minor bugfixing

Download v0.52 (for Joomla 1.6+)

v0.51 (2nd release) // 2011-08-09

  • No bugs fixed, no features added, but EasyImageCaption is now available for Joomla 1.6/1.7, too. The 1.5 ZIP file has been renamed, but it has not changed since the last update. So if you are already using v0.51 on Joomla 1.5, there is no need to change anything now.

v0.51 // 2011-04-05

v0.5 // 2011-04-03

  • Width calculations consider CSS image borders and padding (specified in image's style tag).
  • Variables "introtext" and "fulltext" are now captionized as well: new parameter allows hiding of captions in introtexts.
  • Got rid of deprecated PHP "split" function.
  • JoomSlide (highslide) compatibility added.
  • Backend parameter panel fixed (please tell me, whether I really fixed it; I was not able to reproduce the problem ;-) ).
  • Undefined variable bug fixed.
  • Margin calculation fixed.
  • JCE border fix.
  • Tried to fix a bug with handling existing JCE captions, as reported by user DDKJJK in the reviews, but could not find any bug (please tell me, if this problem still exists).

v0.49beta3 // 2010-03-24

v0.49beta2 // 2010-03-12

  • Fixed bug "Call to undefined function JCEToolTipFix()" when using the TITLE tag for captions.

v0.49beta1 // 2010-03-04

  • Important parts of code rewritten. The new HTML structure (with SPAN elements rather than DIV elements) provides enhanced handling of images within paragraphs without losing HTML validity. This fixed some major bugs (e.g. doubling of images, alignment problems).
    If you have been using previous versions of EasyImageCaption with external CSS for caption styling, you will have to change the CSS to match the new HTML structure! Parameters have also changed.
  • New "apply to" and "except" parameters: giving you better control of when captions are generated; default can be "apply to all images" or "apply to none".
  • Images in section and category descriptions (shown at top of a blog view for instance) are "captionized", too.
  • New parameter: possibility to hide captions on frontpage and/or in blog view.
  • New parameter: define the minimum size of images to get captions; that keeps small buttons and icons "caption-free".
  • New parameter: copy the image's CSS classes to the new surrounding picture box (container).
  • New parameter: choose whether to place the caption below or above the image.
  • Added some new style parameters for better margin control.
  • Added support for special "formatting tags" (similar to BBCode) that will be converted into HTML tags when showing the captions.
  • Added JCE tooltip fix, that deletes a double colon (inserted by JCE as control characters for its tooltip function) at the end of the caption string.
  • Added support for Simple Image Gallery by adding the respective css classes as defaults to the "except classes" parameter.
  • Added support for !JoomlaComment by adding the respective css id as default to the "except ids" parameter.

v0.3 // 2009-08-05

  • Enhanced the "Ignore classes" parameter: images will also be ignored, if one of the classes set is assigned to a superior HTML element. This will help users to easily disable EasyImageCaption when experiencing compatibility problems with other plugins.
  • Removed compatibility with Very Simple Image Gallery plugin from source code and added the gallery plugin's CSS class to the new "Ignore classes" parameter as default instead.
  • Added further "ignore classes" as default for compatibility with The Ultimate Social Bookmarking Plugin.
  • Added compatibilty with JUMultithumb plugin.

v0.2 // 2009-07-30

  • Added options to ignore certain articles, articles of certain sections or articles of certain categories
  • Added basic style settings to parameters
    (is enabled by default, but can be turned off, if you prefer to use the template's CSS file for styling)
  • Added compatibility with JoomGallery's JoomPlu plugin
    (JoomPlu's alignment parameter is recognized; width of caption div can be set separately)
  • Added compatibility with Very Simple Image Gallery plugin
    (EasyImageCaption is automatically disabled within this plugin since it has its own caption function)
  • Added multi-language support with English and German language files for backend
  • Enhanced calculation of the width of the DIV container (this fixed a rare problem)

v0.1 // 2009-06-29

  • Initial release

FAQ

  • 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.