Hi Folks,

this is not really a feature request, but a proposal of what I'm currently trying to implement. I want to port my band's website to drupal and I want to be able to add a description to the image like in:
http://www.tam-lin.info/musiker.html (all German, but you'll get the idea)

This is done by placing the image and its description inside a div which has the style assigned to the image, like:

<div class="img-right">
  <img src="/images/me.jpg" height="319" width="319" alt="My Pic" title="My Pic" /> 
  <p>That's me<br />more descriptive text</p>
</div>

which can now be styled any way you like. Note that the image itself isn't styled.

To achieve this I would like to add another option (desc=0|1) to image_filter.

I'd change the db query to:

-$result = db_query(db_rewrite_sql("SELECT n.nid, n.title, f.filename, f.filepath FROM {files} f, {node} n ...
+$result = db_query(db_rewrite_sql("SELECT n.nid, n.title, n.body, f.filename, f.filepath FROM {files} f, {node} n ...

If desc=1, the body from the image node will be placed in the <p> like in the example above. If desc=0 or not defined, the

will not be created.

desc=1

<div class="img-right">
  <img src="/images/me.jpg" height="319" width="319" alt="My Pic" title="My Pic" /> 
  <p>That's me<br />more descriptive text</p>
</div>

desc=0|undefined

<div class="img-right">
  <img src="/images/me.jpg" height="319" width="319" alt="My Pic" title="My Pic" /> 
</div>

What do you think about this?

I'd also suggest to always create the title="" as well, because Firefox doesn't display a hint text when title is not set, whereas IE displays a hint when only the alt="" is set.

Comments

luebbe’s picture

Assigned: Unassigned » luebbe
Status: Active » Needs review

Hi David,

Here's a small patch for image filter, that pulls the description from the image node, creates a paragraph and inserts it into the paragraph, if desc=1 is set. In this case it assignes the image div it creates the class name given in the [image:...] definition. This class has to be defined in the css of course.

/**
 * Actually execute filter on given text.
 */
function image_filter_process($text) {

  // Find all the image codes and loop over them, replacing each with an img tag.
  preg_match_all("/\[image:(\d+)(\s*,)?\s*(.*?)\]/i", $text, $matches, PREG_SET_ORDER);
  foreach ($matches as $match) {

    $args = array();
    if (strlen($match[2]) > 0) {
      // Original syntax: [image:NID,align,hspace,vspace,border]
      $a = preg_replace('/\W/', '', preg_split("/\s*,\s*/", $match[3]));
      $args['align']  = image_filter_attr_value($a[0], IMAGE_FILTER_WORD);
      $args['hspace'] = image_filter_attr_value($a[1], IMAGE_FILTER_INTEGER);
      $args['vspace'] = image_filter_attr_value($a[2], IMAGE_FILTER_INTEGER);
      $args['border'] = image_filter_attr_value($a[3], IMAGE_FILTER_INTEGER);
    }
    else {
      // New syntax: [image:node_id (left|right|top|middle|bottom|absmiddle|texttop|baseline|align=alignment) hspace=n vspace=n border=n size=label width=n height=n nolink=(0|1) desc=(0|1) class=name style=style-data]

      // Convert bare alignment 'X' to 'align="X"'.
      $match[3] = preg_replace("/^(left|right|top|middle|bottom|absmiddle|texttop|baseline)\b/i",
                               "align=\"$1\"", $match[3]);

      preg_match_all("/(\w+)\=(\"[^\"]*\"|\S*)/", $match[3], $a, PREG_SET_ORDER);
      foreach ($a as $arg) {
        $args[strtolower($arg[1])] = $arg[2];
      }
    }

    $width = image_filter_attr_value($args['width'], IMAGE_FILTER_INTEGER);
    $height = image_filter_attr_value($args['height'], IMAGE_FILTER_INTEGER);
    $size = image_filter_attr_value($args['size'], IMAGE_FILTER_WORD);
    if ($size == 'original') { $size = '_original'; }
    if (!$width && !$height && strlen($size) == 0) { $size = 'thumbnail'; }

    $img = NULL;

// Pull image node title and body from the database
    $result = db_query(db_rewrite_sql("SELECT n.nid, n.title, n.body, f.filename, f.filepath FROM {files} f, {node} n WHERE n.status = 1 AND f.filemime LIKE 'image/%%' AND f.nid = n.nid AND n.nid = %d" . (strlen($size) != 0 ? " AND f.filename IN ('" . db_escape_string($size) . "','_original')" : '')), $match[1]);

    // Loop over the files found for this image and select the best match.
    while ($i = db_fetch_object($result)) {
      $i->size = getimagesize(file_create_path($i->filepath));
      if (! $img) {
        $img = $i;
      }
      // If we find a match for the desired image size label, take it.
      if ((strlen($size) != 0) && ($i->filename == $size)) {
        $img = $i;
        break;
      }
      // If we find a better match for the desired image width or height, tentatively take it.
      if ($width && $i->size[0] >= $width && $i->size[1] >= $height) {
        if ($i->size[0] < $img->size[0] || $img->size[0] < $width) {
          $img = $i;
        }
      }
      if ($height && $i->size[1] >= $height && $i->size[0] >= $width) {
        if ($i->size[1] < $img->size[1] || $img->size[1] < $height) {
          $img = $i;
        }
      }
    }

    // If we found a matching image, replace the image code with an <img> tag.
    if ($img) {
      $img->fileurl = file_create_url($img->filepath);

      if (! $width && ! $height) {
        $img->width = $img->size[0];
        $img->height = $img->size[1];
      }
      else if ($width && ! $height) {
        $img->width = $width;
        $img->height = round($img->size[1] * $width / $img->size[0]);
      }
      else if ($height && ! $width) {
        $img->height = $height;
        $img->width = round($img->size[0] * $height / $img->size[1]);
      }
      else {
        $img->width = $width;
        $img->height = $height;
      }

      $img->align = image_filter_attr_value($args['align'], IMAGE_FILTER_WORD);
      $img->hspace = image_filter_attr_value($args['hspace'], IMAGE_FILTER_INTEGER);
      $img->vspace = image_filter_attr_value($args['vspace'], IMAGE_FILTER_INTEGER);
      $img->border = image_filter_attr_value($args['border'], IMAGE_FILTER_INTEGER);
      $img->class = image_filter_attr_value($args['class'], IMAGE_FILTER_WORD);
      $img->style = image_filter_attr_value($args['style'], IMAGE_FILTER_STRING);
      $img->link = ($args['nolink'] ? NULL : "node/$img->nid");
      $img->desc = ($args['desc'] ? $img->body : NULL);

      $img_tag = theme("image_inline_img", $img);
      $text = str_replace($match[0], $img_tag, $text);
    }
  }

  return $text;
}

/**
 * Theme function to render image in a node.
 * Displays a thumbnail with a link to the image.
 */
function theme_image_inline_img($img) {
  $imgtag = "<img src=\"$img->fileurl\"" .
    ($img->width ? " width=\"$img->width\"" : '') .
    ($img->height ? " height=\"$img->height\"" : '') .
    ($img->align ? " align=\"$img->align\"" : '') .
    ($img->border ? " border=\"$img->border\"" : '') .
    ($img->hspace ? " hspace=\"$img->hspace\"" : '') .
    ($img->vspace ? " vspace=\"$img->vspace\"" : '') .
    " alt=\"$img->body\"" .
    " title=\"$img->body\"" .
    ($img->class ? " class=\"$img->class\"" : '') .
    ($img->style ? " style=\"$img->style\"" : '') . " />";

    $imgdiv = ($img->link
          ? l($imgtag, $img->link, array(), NULL, NULL, FALSE, TRUE)
          : $imgtag);

    if ($img->desc) {
        $imgdiv = "<div class=\"$img->class\">" . 
        $imgdiv . "<p>" . "$img->body" . "</p></div>";
  }
		
  return ($imgdiv);
}
asb’s picture

Version: 4.6.x-1.x-dev » master
Priority: Minor » Normal
Status: Needs review » Needs work

Updating status and joining the request for image captions/descriptions.

Greetings, -asb

asb’s picture

Status: Needs work » Closed (duplicate)