Greetings,

I've managed to get the custom pagers module up and running and wanted to share a way to display icons in the navigation instead of textlinks. Here is how it is done:

1. Put this code into the "custom-pager.tpl.php" file, replacing the old code:

?>
<ul class="custom-pager custom-pager-<?php print $position; ?>">
<li class="first"><?php print $first; ?></li>
<li class="previous"><?php print $previous; ?></li>
<li class="next"><?php print $next; ?></li>
<li class="last"><?php print $last; ?></li>
</ul>

2. in the "custom_pagers.module" file, scroll down to the very end of the file and replace this part of code...:

  $vars['previous'] = !empty($nav['prev']) ? l(t('‹ previous'), 'node/'. $nav['prev']) : '';
  $vars['key'] = t('@count of @count_total', array('@count' => ($nav['current_index'] + 1), '@count_total' => count($nav['full_list'])));
  $vars['next'] =  !empty($nav['next']) ? l(t('next ›'), 'node/'. $nav['next']) : '';

...by this one:

  $vars['previous'] = !empty($nav['prev']) ? l("<img src='insert url to the desired icon here'/>",'node/'. $nav['prev'], array("html"=>true)) : '';
  $vars['key'] = t('@count of @count_total', array('@count' => ($nav['current_index'] + 1), '@count_total' => count($nav['full_list'])));
  $vars['next'] =  !empty($nav['next']) ? l("<img src='insert url to the desired icon here'/>",'node/'. $nav['next'], array("html"=>true)) : '';
  $vars['first'] =  !empty($nav['first']) ? l("<img src='insert url to the desired icon here'/>",'node/'. $nav['first'], array("html"=>true)) : '';
  $vars['last'] =  !empty($nav['last']) ? l("<img src='insert url to the desired icon here'/>",'node/'. $nav['last'], array("html"=>true)) : '';

replace "insert url to the desired icons here" with the actual url to your icon image.

3. replace all the code in your "custom_pagers.css" file with this one:

ul.custom-pager {
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.custom-pager li {
  margin: auto;
  padding: 0;
  display: inline;
  width: 32%;
  list-style-type: none;
  list-style-image: none;
  background: none;
  white-space: nowrap;
}

Et voila you're done. Just remember to grab a few navigations icons form the web. I took the ones from here: http://www.iconspedia.com/pack/buttons-554/

The end-result will look something like this (see attachment):

CommentFileSizeAuthor
pagers.jpg75.59 KBpaddes

Comments

huayen’s picture

huayen commented

cool! Thanks.

Andrey Zakharov’s picture

Andrey Zakharov commented

goddie dr6 preprocess not work :(

jdln’s picture

jdln commented

Worked for me but I copied the entire function from the module into my template.php file. So this should still work if the module is updated.

Thanks Paddes

function YOURTHEMENAME_preprocess_custom_pager(&$vars) {
  drupal_add_css(drupal_get_path('module', 'custom_pagers') .'/custom_pagers.css');
  $node = $vars['node'];
  $pager = $vars['pager'];
  $nav = $vars['nav_array'];

  $vars['previous'] = !empty($nav['prev']) ? l('‹ ' . t('previous'), 'node/'. $nav['prev']) : '';
  $vars['key'] = t('@count of @count_total', array('@count' => ($nav['current_index'] + 1), '@count_total' => count($nav['full_list'])));
  $vars['next'] =  !empty($nav['next']) ? l(t('next') . ' ›', 'node/'. $nav['next']) : '';

  $vars['template_files'][] = "custom-pager-{$vars['position']}";
  $vars['template_files'][] = "custom-pager-$node->type";
  $vars['template_files'][] = "custom-pager-$node->type-{$vars['position']}";
  $vars['template_files'][] = "custom-pager-$pager->pid";
  $vars['template_files'][] = "custom-pager-$pager->pid-{$vars['position']}";
}
jdln’s picture

jdln commented

I should specify, the code i pasted is from the module, so you need to change it to what you want it to be as Paddes described.