For all those reading this tutorial

A group of Drupal developers are working on a way to automate at least some of the tasks here, and I've had an epiphany that may, within the next week or so, at least make the process less tedious. I still recommend going through this tutorial, though, to understand the nuts and bolts of what goes on behind the scenes, as a learning exercise on working with these modules, and because hey--Why wait a week or two when you can get things going now, eh?

Webcomic navigation part 3- Custom pagers

Rob's picture
Submitted by Rob on Thu, 2009-05-21 04:36

Go to Administration >> Site building >> Custom pagers. None will be defined yet, so click the link that says, "Add a new custom pager."

Name your custom pager with whatever your comic name is, select whatever position you want for it--either above, below, or both (I like displaying it in both places)--and select "Comic Page," for the content type.

Scroll down and select the view you just created where it says, Use a view."

Scroll down some more and click "Reverse the list of nodes." This is so your most recent comic will show as the first thing people see on your comic page.

Hit "Save," and you'll be taken back to the Custom pagers list. Your custom pager is set up and will show in the list now, so you can move on to the next step.

Note: The version of the Custom Pagers module that I provided in the "What you'll need" section is already modified for traditional webcomic navigation. If you're using another version, you'll need to modify it.

There are, as of this writing, two oddities with the Custom Pagers module. One is that the .dev version works, but not the official release. The other oddity is that by default there are no first and last links. No idea why on either of these. I've attached the .dev version with the additional code, but just so you know what I've done so that you can do it too, once the official release becomes usable, see below.

Inside your sites/all/modules/custom_pagers directory, open the file named custom_pagers.module in a text editor and scroll down to find this 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']) : '';

Replace this chunk of code with the following--Note that all I've done here is add the top line, for "first," and the bottom line for "last."

  $vars['first'] = ($nav['first']) ? l(t('‹‹ first'), 'node/'. $nav['first']) : '';
  $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['last'] = ($nav['last']) ? l(t('latest ››'), 'node/'. $nav['last']) : '';

Good so far? Now from the same directory, open custom_pager.tpl.php and look for the following code:

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

Replace it with this 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="key"><?php print $key; ?></li>
<li class="next"><?php print $next; ?></li>
<li class="last"><?php print $last; ?></li>
</ul>

Again, note that all I've done is add code for the first and last links.

Lastly, in custom_pagers.css, style your pager. Here's the way mine is set up, but YMMV, and you may have to adjust it later:

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

/* I changed several of the css properties below */

ul.custom-pager li {
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
  display: inline;
  list-style-type: none;
  list-style-image: none;
  background: none;
  white-space: nowrap;
}

You're almost done. Now it's time to make a few tweaks.