Previous and Next navigation in Drupal

An obvious feature you often need on a website are previous and next navigation links, especially when building something like a picture gallery. Preferably with image thumbnails as in Flickr galleries. Out of the box, this basic functionality can be a challenge to realize in Drupal but it's perfectly possible with a bit of understanding how the next previous API module works and some code.

This nice module eliminates the need to build expensive queries for finding out which node should be shown next because everything is stored in a table.  One minor drawback (which usually isn't a problem) is that the node order is only indexed during cron runs, which means a newly added gallery should be manually followed by a cron job - or you can schedule cron jobs more often.

This howto assumes you're building your image galleries the Drupal way with CCK, Views, ImageField and ImageCache and not with something like the Image module. A demonstration can be seen on the Blushuis website which we launched last week (click on 'Fotoboeken'). You will find an overview of galleries, if you enter one of those, you will see a screen similar to the image below.

[caption id="attachment_1061" align="alignnone" width="574" caption="Next and Previous Flickr-like-navigation in picture galleries"]Next and Previous Flickr-like-navigation in picture galleries[/caption]

After installing the prev_next_api module you will have to configure it's settings for your specific content-type. And don't forget to run cron.

Next you will need to have some extra variables available in your theme layer. A nice and clean way to do this would be creating a small custom.module with this piece of code.  Alternatively, if you don't know how to build modules, you could use this code in your theme's template.php (replacing custom with your theme name of course).
function custom_preprocess_page(&$vars) {
// Declare variables.
$vars['prev_node'] = '';
$vars['next_node'] = '';
if (!empty($vars['node'])) {
// Load the previous node.
$prev_node_nid = prev_next_nid($vars['node']->nid, 'prev');
if ($prev_node_nid) {
$vars['prev_node'] = node_load($prev_node_nid);
// Load the next node.
$next_node_nid = prev_next_nid($vars['node']->nid, 'next');
if ($next_node_nid) {
$vars['next_node'] = node_load($next_node_nid);
Now you can use the variables $prev_node and $next_node in your page.tpl.php.

Extra tip: if you want to use ImageCache generated thumbnails, you can use the theme_imagecache function to set this up easily. An example for the previous image could be:
l(theme_imagecache('default_teaser', 'sites/merge_blog/files/' . $prev_node->field_your_imagefield_name[0]['filename'], $prev_node->title, '', TRUE), 'node/' . $prev_node->nid,
'html' => TRUE,
'attributes' => array('title' => t('Go to the previous image.')),
You should however preprocess this even more and customize for your own paths (in case you use dynamic paths) content-types and/or imagecache presets in your template.php so your .tpl files are kept clean.

That's it! Don't forget to have cache cleared and drupal_rebuild_theme_registry() enabled when testing ;)

Building features on Open Atrium

Read More »


This is the company blog of
Drupal specialist

We are located in Breda (Netherlands) and build websites using Drupal. More about us.

Content on this blog is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Netherlands License.

Creative Commons License

Recent Comments