A recent request for a site that uses the image module was to have easier navigation for their collection. The requirements was to have the thumbnail of the previous and next image below the image that is being displayed as a visual cue for the user so they click on the ones that interest them.

Of course, with a bit of magic, this is perfectly possible.

Two pieces of code are needed. The first go into the template.php of the theme you are using.

In this file, add the following function:

 function pn_node($node, $mode) {
$output = NULL;

switch($mode) {
case 'p':
$op = '<';
$order = 'DESC';
break;
case 'n':
$op = '>';
$order = 'ASC';
break;
default:
return NULL;
}

$sql = "SELECT nid FROM {node} n
WHERE nid $op %d
AND type = 'image'
AND status = 1
AND promote = 1
ORDER BY nid $order
LIMIT 1";
$o_nid = db_result(db_query($sql, $node->nid));
if ($o_nid) {
$o_node = node_load($o_nid);
$output = l(image_display($o_node, 'thumbnail'),
"node/$n_nid", array(), NULL, NULL, FALSE, TRUE);
}

return $output;
}

Then you copy the node.tpl.php to a file called node-image.tpl.php and add the following snippet to it where you want the thumbnails to appear:

<div class="previous-thumbnail"><?php print pn_node($node, 'p') ?></div>
<div class="next-thumbnail"><?php print pn_node($node, 'n') ?></div>

You can now use CSS to theme how they should be aligned, and otherwise look.

Comments

Wed, 2008/08/13 - 10:15

The links weren't working correctly. It needs three more lines, e.g. like this:

  $n_nid = $node->nid;
  switch($mode) {  
    case 'p':
      $n_nid--;  
      $op = '<';  
      $order = 'DESC';
      break;
    case 'n':
      $n_nid++;
      $op = '>';
      $order = 'ASC';
      break;
    default:
      return NULL;
  }

Is your Drupal or Backdrop CMS site slow?
Is it suffering from server resources shortages?
Is it experiencing outages?
Contact us for Drupal or Backdrop CMS Performance Optimization and Tuning Consulting