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:

<!--?php
/*
  This module looks for <img--> tags of the class 'caption', 'image-right' or 'standalone-image'
  with a alt attibute set.  It then places the <img alt="" /> tag in a
<div> with the width and class
  attributes set. A
<div> tag of class "caption" is also added with the caption text obtained
  from the alt.  It removes the class attribute "caption" from the <img alt="" /> 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 =&gt; 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 <img alt="" /> tags and run the doImgTitles function on the <img alt="" /> 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 <img alt="" /> tag
  preg_match ('/alt=\"(.+?)\"/i', $imgText, &amp;$matches);
  $alt = $matches[1];

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

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

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

    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:

<img class="caption" src="/sites/default/files/uploads/my.png" alt="This should be the alt text and the caption text" width="328" height="129" />

…To this…

<div class="caption">

<img src="/sites/default/files/uploads/my.png" alt="This should be the alt text and the caption text" width="328" height="129" />
<div class="caption">This should be the alt text and the caption text</div>
</div>

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