Previous and Next Navigation With ListPages

By Ed JohnsonEd Johnson

Description

If you'd like to make it easier for users to navigate a series of pages (like blog posts or a series of related articles), you can set up a < Previous | Next > type of navigation using the ListPages module and a live template.

Code

Create a live template for the category you want to navigate. For example, blog:_template and place the following code on that page. Note that you can modify the CSS styles to fit your site.

[[div style="overflow:hidden"]]
[[div style="width:49%; padding: 0; min-height: 45px; float: left; clear: left; border: 1px solid #888888; font-weight: bold;"]]
[[=]]
[[module ListPages limit="1" range="after" order="title desc" separate="no"]]
<< %%title_linked%%
[[/module]]
[[/=]]
[[/div]]
[[div style="width: 49%; padding: 0; min-height: 45px; float: right; border: 1px solid #888888; font-weight: bold;"]]
[[=]]
[[module ListPages limit="1" range="after" order="title" separate="no"]]
%%title_linked%% >>
[[/module]]
[[/=]]
[[/div]]
[[/div]]
%%content%%

The code above will order the pages alphabetically by the page title. If you want to order the pages differently, you can use any of the order parameters allowed by ListPages.

For example, to order the pages chronologically by creation date, use order="created_at desc" and order="created_at desc" in the ListPages modules. To order by the most recently edited pages, use order="updated_at desc" order="updated_at". If your pages are in an autonumbered category, use can use order="name desc" and order="name" to make sure pages are listed in order by autonumbering.

In action

MyFamilyPhotos uses this method to add navigation to a collection of photo galleries, ordered by page title. Select any gallery to see how the navigation works.

If you'd like to make use of a more full-featured navigation method (like the one used on the Official Wikidot Blog, check out the Scrollbar CSI.


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Ed Johnson

Per-User CSS - 07 Aug 2012 04:05
Yahoo! WebPlayer - 16 Feb 2012 01:53
Custom Permissions Error Message - 14 Feb 2012 03:42


Rate this solution

If you think this solution is useful — rate it up!

rating: +2+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License