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):
  

  term
        [term-id]

(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)) { ?>
    <?php
      print '<div class="prev-icon" >'. l(prevnext_nav($nav_array['prev']), 'node/'. $nav_array['prev'], $options = array('html' => TRUE)) .'</div>';
      print $previous; ?>
    <?php } ?>
  </li>
  <li class="key"><?php print $key; ?></li>
  <li class="next">
    <?php if (! empty($next)) { ?>
      <?php
        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>
</ul>

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 (← 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.