Joomla! Image Captioning

The stock image captioning application in Joomla! 1.5, caption.js, modifies the DOM of the page in ways that are not standards-compliant. The application inserts a <div> inside of a <p>, which obviously isn't permitted. This leads to unpredictable page rendering, and outright chokes Konqueror 3.5.10. Also, the existing application doesn't work for images inside of a hyperlink, which is downright silly, IMO.

I have rewritten caption.js to produce a valid structure using nested span tags. This nesting also permits nice styling of captioned image borders.

I have tested this in the current versions of IE, FF, Safari, Konqueror, Opera, and Chrome. I do not have access to any boxes still running IE 6, so I have not tested it on IE 6. I'm not too concerned about supporting IE 6, especially as Microsoft is putting the finishing touches on IE 8. That said, if you have access to IE 6, please let me know if the captioned images look acceptably close to how IE 7 or FF 3 renders them, so I can update this page.

The CSS

To style the captioned image, add these properties to your Joomla! theme's template.css file:

/*
 * BEGIN Properties for Improved Auto-Captioning script, caption.js
 */
 
/* Outermost container holding a captioned image, generated by caption.js */
.captioned_image_container
{
    /* How much space between container & surrounding content? */
    margin: 8px 8px 2px 8px;
    /* How much space on between container & the contained content? */
    padding: 0px;
    display: block;
    text-align: left;
    width: auto;
    border: 1px solid #ccc;
}
 
.captioned_image_border
{
    padding: 0px;
    text-align: left;
    display: block;
}
 
.image_wrapper, .img_caption
{
}
 
/* Container holding image & maybe a link */
.image_wrapper
{
    display: block;
    width: auto;
}
 
/* Container holding the image's caption */
.img_caption
{
    text-align: center;
    display: block;
    padding: 2px;
}
 
/* The captioned image itself */
.caption, .caption2
{
    padding: 3px;
}
 
/*
 * END Properties for Improved Auto-Captioning script, caption.js
 */

Caption.js

Here is the improved version of caption.js

/**
* @version    $Id: caption.js 5263 2006-10-02 01:25:24Z webImagery $
* @copyright  Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
* @license    GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
 
/**
* JCaption javascript behavior
*
* Used for displaying image captions
*
* @package  Joomla
* @since  1.5
* @version  1.0
*/
var JCaption = new Class({
  initialize: function(selector)
  {
    this.selector = selector;
 
    var images = $$(selector);
    images.each(function(image){ this.createCaption(image); }, this);
  },
 
  createCaption: function(element)
  {
    var caption   = document.createTextNode(element.title);
    var container = document.createElement("div");
    var text      = document.createElement("p");
    var width     = element.getAttribute("width");
    var align     = element.getAttribute("align");
 
    if(!width) {
      width = element.width;
    }
 
    //Windows fix
    if (!align)
      align = element.getStyle("float");  // Rest of the world fix
    if (!align) // IE DOM Fix
      align = element.style.styleFloat;
 
    if (align=="") {
      align="none";
    }
 
    text.appendChild(caption);
    text.className = this.selector.replace('.', '_');
 
    element.parentNode.insertBefore(container, element);
    container.appendChild(element);
    if ( element.title != "" ) {
      container.appendChild(text);
    }
    container.className   = this.selector.replace('.', '_');
    container.className   = container.className + " " + align;
    container.setAttribute("style","float:"+align);
 
    container.style.width = width + "px";
 
  }
});
 
document.caption = null;
window.addEvent('load', function() {
  var caption = new JCaption('img.caption')
  document.caption = caption
});

Download & Install

I strongly suggest that you rename the existing caption.js (to caption.js.bak, for example) rather than overwriting or deleteing it. That way, you can always easily reinstall the original should you need to. Download caption.js. Once you have the original archived, simply upload the new version. Don't forget to add the new CSS properties to your template.css file.

MarkTaff.com