Drupal image module: make images clickable to original size

Drupal's image module has the option to let visitors view the original resolution of an image. However, the only way to view the original is to click on the "view original" link below the image.

This may not be what the client wants, since a more common way of presenting images on the web is to make the image clickable to the higher resolution image.

For a demo of this feature, please visit Ads of the World. 

This article discusses how to do that for Drupal 4.6, 4.7 and 5.0.

For Drupal 4.6

For Drupal 4.6, the image.module has to be modified to make this possible. Here is how to do so.

In image.module, find the line that says:

  function image_display(&$node, $label = 'preview', $attributes = array()) {

A few lines below that you will see this line that starts with :

  $output.= theme('image', file_create_url($node->images[$label]), ... 

Add the following code before it:

  // *** Display original as a link from the image
  if ($_GET['q'] == drupal_get_normal_path('node/' . $node->nid)) {
    // We are viewing the node itself, not the gallery
    if ($label != '_original') {
      // We are not already in the view original mode
      if ($node->images['_original']) {
        // The node does have an original in the list
        $pre = "<a href='" . url("node/" . $node->nid) . "?size=_original'>";
        $post = '</a>';
      }
    }
  }

  $output .= $pre; 

And then add the following line after it:

   $output .= $post;

For Drupal 4.7 and 5.0

Things are easier in Drupal 4.7 and 5.0. You do not need to edit the image.module, but can override the way the image is displayed.

What you need to do is edit the template.php in your theme directory, and add the following function to it:

function phptemplate_image_display($node, $label = 'preview', $url = NULL, $attributes = array()) {
  // *** Display original as a link from the image
  if ($_GET['q'] == drupal_get_normal_path('node/' . $node->nid)) {
    // We are viewing the node itself, not the gallery
    if ($label != '_original') {
      // We are not already in the view original mode
      if ($node->images['_original']) {
        // The node does have an original in the list
        $pre = "<a href='" . url("node/" . $node->nid) . "?size=_original'>";
        $post = '</a>';
      }
    }
  }

  $output .= $pre;
  $output .= '<img src="'. check_url($url) .'" alt="'. check_plain($node->title) .'" title="'. 
    check_plain($node->title) .'" '. drupal_attributes($attributes) .' />';
  $output .= $post;
  return $output;
}

Now, if a visitor is viewing an image node, and they mouse over the image, they will get a link to the original resolution version of that image node.

Enjoy.