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.

Contents: 

Comments

I notice in your example

I notice in your example that a link is provided even when the thumbnail /is/ the original image and there is none larger. This is a bit confusing. Also it might be an idea to remove the "view original" text link.

good one. one question

good one.
one question though, what if i'd like to show the original size in a blank page cause it shows it in a node page breaking all the layout. any ideas?
thanks

Show in blank page

To show your image outside of the template of your site you will want to make a php template file for the image content type that was automatically created. Something like node-image.tpl.php.

Thanks my friend

I just had to do this to a drupal 4.7 site and I was glad that I found your post. I personally wrote a post on installing and using Image Assist in Drupal 6:Configuring Image Assist in Drupal 6, but my knowledge doesn't go back to 4.8 THANKS AGAIN.

i would know what to do to

i would know what to do to have the same result in drupal 6.1.

Thank you

I would like to know how to

I would like to know how to do it in drupal 6.x as well!

Thanks!