Last updated 10 June 2011. Created on 9 February 2010.
Edited by batigolix, asb, Hetta. Log in to edit this page.

Creating a Custom Pager for Image Galleries

To set up a pager for Image Gallery images:

1. install the contributed modules custom pagers and token

2. Create a pager with these settings:

  • visibility:
    • If *all* your image nodes are in galleries, just pick 'image' from the node type selection.
    • If some images are not in galleries, enter this PHP code:
            if ($node->type == 'image') {
              $vid = variable_get('image_gallery_nav_vocabulary', '');
              // Check to see if any taxonomy term on this node is a gallery term.
              foreach($node->taxonomy as $term) {
                if ($term->vid == $vid) {
                  return TRUE;
  • pager node list, 'Use a view': pick 'image_gallery'.
  • pager node list, view arguments: Enter this code (two lines):

(Thanks to Joachim!)

Notice: You may need to adjust your vocabulary weights to make sure that the [term-id] token corrrectly produces the gallery term -- the token description says it returns the 'top term' so I presume this considers vocabulary weight. If your images have terms in more than one vocab, move the gallery vocab to be the first.

Themeing a Custom Pager for Image Galleries

Your pager will almost certainly need theming: see the custom pagers documentation pages for some snippets.

Displaying Preview Thumbnails in the Custom Pager for Image Galleries

On the Custom pager themeing examples handbook page, awolfey suggests a way to display preview thumbnails inside the pager. Based on his code, the following snippets will show thumbnails for the previous and for the next image in the image gallery:

In template.php, you'll need these snippets:

function phptemplate_preprocess_custom_pager(&$vars) {
  // if we're at the end, the nav_array item for this (eg first) is NULL;
  // no need to compare it to current index.
  $vars['first'] = empty($vars['nav_array']['first']) ? '' : l(t('First image'), 'node/' . $vars['nav_array']['first']);
  $vars['last'] = empty($vars['nav_array']['last']) ? '' : l(t('Last image'), 'node/' . $vars['nav_array']['last']);

function prevnext_nav($nid) {
  $result = db_query("SELECT i.image_size, f.filepath FROM {image} i INNER JOIN {files} f ON i.fid = f.fid WHERE i.nid = %d", $nid);
  $images = array();
    while ($file = db_fetch_object($result)) {
      $images[$file->image_size] = file_create_path($file->filepath);
  return '<img src="/'. $images['icon'].'">';

Notice: The l() function builds the navigation link, and the link text is run through the t() function to make the string editable and translatable.

In custom-pager.tpl.php you'll ned this markup:

<div class="clear"></div>
<ul class="custom-pager custom-pager-<?php print $position; ?>">
  <li class="first"><?php print $first; ?></li>
  <li class="previous">
  <?php if (! empty($previous)) { ?>
      print '<div class="prev-icon" >'. l(prevnext_nav($nav_array['prev']), 'node/'. $nav_array['prev'], $options = array('html' => TRUE)) .'</div>';
      print $previous; ?>
    <?php } ?>
  <li class="key"><?php print $key; ?></li>
  <li class="next">
    <?php if (! empty($next)) { ?>
        print '<div class="next-icon" >'. l(prevnext_nav($nav_array['next']), 'node/'. $nav_array['next'], $options = array('html' => TRUE)) .'</div>';
      print $next; ?></li>
    <?php } ?>
  <li class="last"><?php print $last; ?></li>

Without preview images and without the « and » elements mentioned below, you can translate the text directly in your template.php file. Somethis like this will work as long as you don't use non-ASCII characters (like German umlauts or French accents):

function phptemplate_preprocess_custom_pager(&$vars) {
  $nav = $vars['nav_array'];

  $vars['first'] = empty($vars['nav_array']['first']) ? '' : l('Erstes Bild', 'node/' . $vars['nav_array']['first']);
  $vars['previous'] = !empty($nav['prev']) ? l('Voriges Bild', 'node/'. $nav['prev']) : '';
  $vars['key'] = t('@count von @count_total', array('@count' => ($nav['current_index'] + 1), '@count_total' => count($nav['full_list'])));
  $vars['next'] =  !empty($nav['next']) ? l('Folgendes Bild', 'node/'. $nav['next']) : '';
  $vars['last'] = empty($vars['nav_array']['last']) ? '' : l('Letztes Bild', 'node/' . $vars['nav_array']['last']);

Localizing the Custom Pager for Image Galleries

In the previous step we made sure that the strings used on the pager link texts are translatable. To translate the string First image, go to ./admin/build/translate/search and search for "First image". You''l get a result listing where you can edit the translated string. Repeat this for the string Last image.

For German localizations, I'm using the strings « Erstes Bild and Letztes Bild ». Please note the « and » elements which couldn't be entered directly into the code for template.php mentioned above, neither directly as Unicode nor as HTML entities (&larr; and rarr;).

The strings ‹ previous and next › can not translated this way; if you try something like print t($previous), you'll lose the link and translate the string for exactly one node.

Looking for support? Visit the forums, or join #drupal-support in IRC.


edulterado’s picture


great tutorial, thanks a lot for sharing.
The snippet for displaying images thumbs in Custom Pager is only for Image module, right?

Is it possible to implement it with CCK image field?

asb’s picture

Looking for this as well...

underpressure’s picture

followed the tutorial and got the pager working but the thumbnails don't show the images, can you help me?

here is a lonk

underpressure’s picture


RaulMuroc’s picture

The exposed solution did not worked for me. Furthermore, It should exist the possibility to do work without choose a views necessarily.

Trying to figure it out that possibility.

Drupal Association individual member

asb’s picture

Funny, after running this solution for a couple of years, this suddenly stopped working. No idea why, and no idea how to debug.

Edit: As it seems, different pager templates (custom-pager-1.tpl.php and custom-pager-2.tpl.php) for different pagers break the image thumbnail functionality. Reason still unknown. Great :-(