Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Based on the original code in Pager with thumbnails amended about thumbnails dimensions and CSS.
- To file template.php add function:
/* Image Gallery Pager with thumbnails */
function custom_pager_thumbnails($current_nid, $class = NULL) {
$tid = reset(array_keys(taxonomy_node_get_terms($current_nid)));
$result = db_query(db_rewrite_sql('SELECT n.nid, n.title, f.filepath FROM {node} n INNER JOIN {term_node} tn INNER JOIN {files} f ON n.nid = tn.nid AND n.nid = f.nid WHERE tn.tid = %s AND n.status = 1 AND f.filename = \'%s\' ORDER BY n.sticky DESC, n.created DESC, n.nid DESC'), $tid, 'thumbnail');
while ($node = db_fetch_object($result)) {
$nodes[++$i] = $node;
if ($node->nid == $current_nid) $x = $i;
// image size
$image_info = image_get_info($nodes[$i]->filepath);
$image_width[$i] = $image_info['width'];
$image_height[$i] = $image_info['height'];
}
if ($i < 6) {
while (++$j <= $i) {
$output .= l('<img src="' . check_url(url('system/files/' . $nodes[$j]->filepath)) . '" alt="'. check_plain($nodes[$j]->title) . '" width="'. $image_width[$j] .'" height="'. $image_height[$j] .'" />', 'node/'. $nodes[$j]->nid, array('title' => check_plain($nodes[$j]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
}
}
else {
switch ($x) {
case 1:
// first image
$y = array($i-1, $i, 1, 2, 3);
break;
case 2:
// second image
$y = array($i, 1, 2, 3, 4);
break;
case $i-1:
// penultimate image
$y = array($x-2, $x-1, $x, $i, 1);
break;
case $i:
// last image
$y = array($x-2, $x-1, $x, 1, 2);
break;
default:
$y = array($x-2, $x-1, $x, $x+1, $x+2);
}
foreach($y as $index => $z) {
if ($index != 3) {
$output .= l('<img src="' . check_url(url('system/files/' . $nodes[$z]->filepath)) . '" alt="'. check_plain($nodes[$z]->title) . '" width="'. $image_width[$z] .'" height="'. $image_height[$z] .'" />', 'node/'. $nodes[$z]->nid, array('title' => '('. ($z) .') '. check_plain($nodes[$z]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
}
else {
$output .= '<span class="active" title="('. ($z) .') '. check_plain($nodes[$z]->title) .'"><img src="' . check_url(url('system/files/' . $nodes[$z]->filepath)) . '" alt="'. check_plain($nodes[$z]->title) . '" width="'. $image_width[$z] .'" height="'. $image_height[$z] .'" /></span>';
}
}
}
return $output;
} - Add the following to node-image.tpl.php (a copy of node.tpl.php in your theme folder):
<!-- Image Gallery Pager with thumbnails -->
<div class="pager">
<?php if ($page != 0 && $terms) { print custom_pager_thumbnails($node->nid); } ?>
</div> - Add to your style.css e.g.:
/* Theme snippet: Image Gallery Pager with thumbnails */
.content .pager {
margin-top: 3px;
margin-bottom: 3px;
}
.content .pager img {
margin-bottom: 3px;
vertical-align: middle;
}
.content .pager .active img {
border: 5px solid #f93;
margin-bottom: 0;
}