ted serbinski – a blog about drupal, macs, productivity, health, and bmws

a blog about drupal, macs, productivity, health, and bmws

Creating an Alpha Pager with Views 2 and Drupal 6

UPDATE: Earl comments below how this is already built in. Two different ways to achieve a similar result, each with their own pros/cons.

Hats off to Earl Miles and the rest the views developers they have done a tremendous job with Views 2. While the interface is entirely different from that of Views 1, it is so much more intuitive that within a few minutes I had quickly forgotten my bewildered "oh no, I know nothing" look :)

From reading all of the docs and quietly watching development commits, I knew Views 2 was going to eliminate a lot of the Views 1 helper modules and open up a whole new world of awesomeness. While I haven't seen many blog posts detailing just which functionality/modules have been replaced with Views 2, I wanted to kickstart things with my own discovery as I played around with Views 2 quite thoroughly this afternoon.

With Views 1, to build an alpha pager you would use the views alpha pager module in conjunction with your view. But what about Views 2?

Well it's not so straightforward. I read somewhere about some sort of "glossary" view, but how could that be used to create an alpha pager? Well turns out, quite easy. Here's how:

  1. First, create a new page view and set your path to "directory"
  2. Assuming you want your pager to be based on the nodes title, add in an argument: "Node: Title"
  3. Set title equal to: "Directory: %1"
  4. Action to take if argument is not present: "Display all values"
  5. Check "Glossary Mode"
  6. Set character limit to "1"
  7. Case: "upper case"
  8. Case in path: "lower case"
  9. Save and update
  10. Add in a header under basic settings
  11. Set up your alpha pager:
    <div class="alpha-pager">
      <a class="alpha-page" href="/directory/a">A</a>
      <a class="alpha-page" href="/directory/b">B</a>
       ...
    </div>

    Note: if you have PHP filter enabled, you can set up proper links using l(), otherwise use basic HTML

And voilá! You can now browse by starting letter of each node. Add in a few more exposed filters like taxonomy terms or search and you have a powerful directory!

That was definitely easy and Views 2 replaces its first helper module. What's next? :)

10 comments

 
merlinofchaos (not verified) wrote 13 weeks 17 hours ago

Well that’s cheating.

Did you look at the default ‘glossary’ view? It uses 2 displays within the view to provide a real alpha pager at the top, using argument overrides to set up subtly different arguments. It is the first example of how awesome attachment displays can be.

 
ted wrote 12 weeks 6 days ago

Cheating huh? I didn’t know about attachment views ;-) But yes, I didn’t see the glossary view and looking at that, very awesome.

However, I am still set on my method above since it provides full control over the actual outputted menu. I want a very clean A-Z, with no #s needed and no funky characters, seeing some listed for " guessing could still be a minor bug.

I see the advantages to both approaches though, each serving different needs. I’m very pleased with how flexible Views 2 is to accommodate all sorts of awesomeness.

 
merlinofchaos (not verified) wrote 12 weeks 6 days ago

It’s worth noting that both the separator and the #s are options in the summary style (click the gear icon next to the summary style on the attachment view) and like all styles, it’s a plugin so it’s super easy to code up alternatives.

If you’re getting ‘‘s that could mean that you have records that have no title, perhaps? Perhaps an additional filter might be necessary to remove those records.

 
ted wrote 12 weeks 4 days ago

Earl, yes even more good points. Clearly there is lots to explore with Views 2, rock! :)

 
ChadC (not verified) wrote 6 weeks 2 days ago

It even looks like images can be added as separators.

 
Anthony Hunt (not verified) wrote 4 weeks 10 hours ago

I’m using Views2 and do not get the glossary option anywhere. Is this something that’s specific to the dev version?

 
Anthony Hunt (not verified) wrote 3 weeks 6 days ago

OK, worked it out now – Glossary mode is a checkbox that is only available within the Arguments setting. Thanks for this tutorial! :)

 
Visitor (not verified) wrote 2 days 22 hours ago

Where do I set the directory path?

 
Visitor (not verified) wrote 2 days 22 hours ago

Where do I set the path? As in “First, create a new page view and set your path to “directory”

 
Visitor (not verified) wrote 2 days 21 hours ago

Okay I figured out the path part, but couldn’t get this to work.

Add your comment

The content of this field is kept private and will not be shown publicly.
  • You can use Textile markup to format text.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <img> <pre>

More information about formatting options

Subscribe to updates

don't worry, spam free!

Recent comments