How do I add image captions using a custom style?

Question

I am not a programmer.

However, I need to know how to use css to add a caption for an image field in a node.

Answer 1

One way would be to create your own theme_image() in your theme's template.php file. It would be pretty straightforward, just grab drupal's default theme_image() from theme.inc and add a span to it:

If Drupal 6:

function YOURTHEMENAME_image($path, $alt = '', $title = '', $attributes = NULL, $getsize = TRUE) {
  if (!$getsize || (is_file($path) && (list($width, $height, $type, $image_attributes) = @getimagesize($path)))) {
    $attributes = drupal_attributes($attributes);
    $url = (url($path) == $path) ? $path : (base_path() . $path);
    return '<img src="'. check_url($url) .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. (isset($image_attributes) ? $image_attributes : '') . $attributes .' /><span class="caption">' . check_plain($title) . '</span>';
  }
}

If Drupal 7:

function YOURTHEMENAME_image($variables) {
  $attributes = $variables['attributes'];
  $attributes['src'] = file_create_url($variables['path']);

  foreach (array('width', 'height', 'alt', 'title') as $key) {

    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  return '<img' . drupal_attributes($attributes) . ' /><span class="caption">' . (isset($variables['title']) ? $variables['title'] : '') . '</span>';
}

Clear caches/theme registry and now every image will have a span with class caption after it with the image's title in it (or blank if none obviously). If you want to get fancier with wrappers and so forth, just put whatever html you want/need in the return's above.

Then CSS this however you want.