Creating Image Captions Using Alt Tags in Drupal

We needed to allow our users to be able to create image captions for images in a way that was easy and made sense to everyone. We wanted our end users to be able to simply add a class of “caption” to an image using the wysiwyg editor and for Drupal to take care of the rest. Thanks to the Drupal discussion here for this simple idea, http://drupal.org/node/264932.Here is one solution that was quick to implement:
Module Download: image_caption_module.gz

Our Step 1:

We created a simple module that added a new input filter, called Image caption filter. Here is the code:

 tags of the class 'caption', 'image-right' or 'standalone-image'
  with a alt attibute set.  It then places the  tag in a
 with the width and class
  attributes set. A
 tag of class "caption" is also added with the caption text obtained
  from the alt.  It removes the class attribute "caption" from the 
 tag.
*/

/**
* Display help and module information
* @param path which path of the site we're displaying help
* @param arg array that holds the current path as would be returned from arg() function
* @return help text for the path
*/

function image_caption_filter_help($path, $arg) {
  $output = '';
  switch ($path) {
    case "admin/help#image_caption_filter":
      $output = '

' .  t("Adds captions to images") . '

';
      break;
  }
  return $output;
} //function image_caption_filter_help
//filter hook implementation
function image_caption_filter_filter($op, $delta = 0, $format = -1, $text = ''){
  switch ($op) {
    case 'list':
      return array(0 => t('Image caption filter'));

    case 'description':
      return t('Adds captions to images via a filter');

    case 'prepare':
      // Nothing to prepare
      return $text;

    case "process":
      //Look for 
 tags and run the doImgTitles function on the 
 tag
      $text = preg_replace_callback('|()|s', 'doImgTitles', $text);
      return $text;

    default:
      return $text;
  }
} //function image_caption_filter_filter

//helper function to do the actual manipulation
function doImgTitles($matches) {
  $imgText = $matches[0];

  //Get the alt out of the 
 tag
  preg_match ('/alt=\"(.+?)\"/i', $imgText, &$matches);
  $alt = $matches[1];

  //Get the width out of the 
 tag
  preg_match ('/width=\"(.+?)\"/i', $imgText, &$matches);
  $width = $matches[1];

  //Get class out of the 
 tag
  preg_match ('/class=\"(.+?)\"/i', $imgText, &$matches);
  $class = $matches[1];

  //Only insert the caption and modify the 
 tag if it is has an alt attribute and has the class "caption"
  if (in_array($class, array('caption')) && ($alt)) {
    $imgText = preg_replace ('/class=\"(.+?)\"/i', '', $imgText);
    $returnText = "
"
              . $imgText 
              . "
" . $alt . "
";

    return $returnText;
  }
  return $imgText;
} //function doImgTitles

Our Step #2:

After enabling the module, we simply added that filter to our existing named filters that we were using for our content types that allowed HTML content. Our two types were “Raw HTML” and “Full HTML”. Do this by:

1. Go to your filter settings at /admin/settings/filters/
2. Choose “configure” for your named filter.
   
3. Under the Filters section select “Image caption filter”
   

Results

Now your images can be given the class of “caption” by your wysiwyg editor or other and they will be converted from this:

…To this…

This should be the alt text and the caption text

This method can be applied to any html element, class, and desired html output. Just change the values in the module. Here is a link to the module if you want it: image_caption_module.gz