MarkTaff.com

  • Increase font size
  • Default font size
  • Decrease font size
Home Software Joomla! Joomla! Image Captioning

Joomla! Image Captioning

E-mail Print PDF

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:

  1. /*
  2.  * BEGIN Properties for Improved Auto-Captioning script, caption.js
  3.  */
  4.  
  5. /* Outermost container holding a captioned image, generated by caption.js */
  6. .captioned_image_container
  7. {
  8. /* How much space between container & surrounding content? */
  9. margin: 8px 8px 2px 8px;
  10. /* How much space on between container & the contained content? */
  11. padding: 0px;
  12. display: block;
  13. text-align: left;
  14. width: auto;
  15. border: 1px solid #ccc;
  16. }
  17.  
  18. .captioned_image_border
  19. {
  20. padding: 0px;
  21. text-align: left;
  22. display: block;
  23. }
  24.  
  25. .image_wrapper, .img_caption
  26. {
  27. }
  28.  
  29. /* Container holding image & maybe a link */
  30. .image_wrapper
  31. {
  32. display: block;
  33. width: auto;
  34. }
  35.  
  36. /* Container holding the image's caption */
  37. .img_caption
  38. {
  39. text-align: center;
  40. display: block;
  41. padding: 2px;
  42. }
  43.  
  44. /* The captioned image itself */
  45. .caption, .caption2
  46. {
  47. padding: 3px;
  48. }
  49.  
  50. /*
  51.  * END Properties for Improved Auto-Captioning script, caption.js
  52.  */
  53.  

Caption.js

Here is the improved version of caption.js

  1. /**
  2. * @version $Id: caption.js 5263 2006-10-02 01:25:24Z webImagery $
  3. * @copyright Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
  4. * @license GNU/GPL, see LICENSE.php
  5. * Joomla! is free software. This version may have been modified pursuant
  6. * to the GNU General Public License, and as distributed it includes or
  7. * is derivative of works licensed under the GNU General Public License or
  8. * other free or open source software licenses.
  9. * See COPYRIGHT.php for copyright notices and details.
  10. */
  11.  
  12. /**
  13. * JCaption javascript behavior
  14. *
  15. * Used for displaying image captions
  16. *
  17. * @package Joomla
  18. * @since 1.5
  19. * @version 1.0
  20. */
  21. var JCaption = new Class({
  22. initialize: function(selector)
  23. {
  24. this.selector = selector;
  25.  
  26. var images = $$(selector);
  27. images.each(function(image){ this.createCaption(image); }, this);
  28. },
  29.  
  30. createCaption: function(element)
  31. {
  32. var caption = document.createTextNode(element.title);
  33. var container = document.createElement("div");
  34. var text = document.createElement("p");
  35. var width = element.getAttribute("width");
  36. var align = element.getAttribute("align");
  37.  
  38. if(!width) {
  39. width = element.width;
  40. }
  41.  
  42. //Windows fix
  43. if (!align)
  44. align = element.getStyle("float"); // Rest of the world fix
  45. if (!align) // IE DOM Fix
  46. align = element.style.styleFloat;
  47.  
  48. if (align=="") {
  49. align="none";
  50. }
  51.  
  52. text.appendChild(caption);
  53. text.className = this.selector.replace('.', '_');
  54.  
  55. element.parentNode.insertBefore(container, element);
  56. container.appendChild(element);
  57. if ( element.title != "" ) {
  58. container.appendChild(text);
  59. }
  60. container.className = this.selector.replace('.', '_');
  61. container.className = container.className + " " + align;
  62. container.setAttribute("style","float:"+align);
  63.  
  64. container.style.width = width + "px";
  65.  
  66. }
  67. });
  68.  
  69. document.caption = null;
  70. window.addEvent('load', function() {
  71. var caption = new JCaption('img.caption')
  72. document.caption = caption
  73. });
  74.  

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.

 

 

Last Updated ( Wednesday, 28 January 2009 22:05 )  

Quotes, Aphorisms & Epigrams

A computer is like an Old Testament god, with a lot of rules and no mercy. Joseph Campbell