← Home

Mephisto Plugin: Paged Article Lists

Please note: These instructions work with the following setups. They are not tested with other combinations and might break on older versions of Mephisto or Rails. Please drop me an email if you've successfully run this plugin on other setups.

  • Mephisto Edge rev 3066 on Rails 2.0

Installation

Just use the script/plugin installer. E.g.:

script/plugin install \
  http://svn.artweb-design.de/stuff/mephisto/mephisto_paged_article_list

Also, as the plugin relies on will_paginate you'll need the will_paginate_liquidized plugin, which you can install like this:

script/plugin install \
  http://svn.artweb-design.de/stuff/rails/will_paginate_liquidized

After installing the plugin, you'll have to tweak your templates manually. You can use the following filters:

Prev/next page links

The plugin provides you with a convenient Liquid filter that will output "previous/next articles" links out of the box. Just add this to your templates:

{{ articles | prev_next_page_links: path_info }}

This will result in something like:

You can also provide two alternative link texts and/or a separator to this filter like this:

{{ articles | prev_next_page_links: path_info, 'previous', 'next' }}
{{ articles | prev_next_page_links: path_info, 'previous', 'next', '·' }}
{{ articles | prev_next_page_links: path_info, '·' }}

Single link filters

You might want to control these links individually though. You can then (like before) use the following filters:

{{ articles | link_to_prev_page: path_info }}   
{{ articles | link_to_next_page: path_info }}

Again, you can inject a different link text. Like so:

{{ articles | link_to_prev_page: path_info, 'previous' }}   
{{ articles | link_to_next_page: path_info, 'next' }}

Digg-style navigation

As we are riding on the back of will_paginate, only some minor additions were necessary to enable the usage of the will_paginate view helper from within our Liquid templates. That means that now you can do this:

{{  articles | will_paginate: path_info }}

... which will result in a nice list of pagination links. You can now easily add some CSS styles (e.g., like proposed here) and achieve something that looks very similar to the paginators on Digg, Flickr and others. Like this:

(To get the boxy style you can easily some CSS like the stylesheet proposed here).

Further reading

You can read more about this plugin here:

Feedback?

As always: very appreciated! Please drop me an e-mail or use the comments on my blog.

blog comments powered by Disqus