Textpattern tips, tutorials and code snippets

Pagination google style

Using pagination for your article lists is made simple thanks to the ob1_googlenav plugin.

Textpattern comes with its own pagination tags – newer and older – while these tags work just fine, the goal here is to create a Google style navigation list.

  1. First, download the plugin and install in the usual way.

Once the plugin is activated, we can place some code in our page template.

Call the plugin from your page

<txp:if_section name="articles">
<txp:article form="article_list" limit="20" />
<txp:ob1_pagination firsttext="First page" previoustext="Previous page" nexttext="Next page" lasttext="Last page" ulclass="pagination" liselected="active" />
</txp:if_section>

The above code is placed in your page template, after the txp:article call. What this does is create a pagination link after the first 20 articles.

Note: In the plugin help file there is an error in the example, which uses the old ob1_googlenav tag. This needs to be ob1_pagination as in my example above.

The plugin attributes are self-explanatory, and documented in the plugin help file.

Some CSS to style the pagination links

ul.pagination {margin: 1em 0; padding: 0.5em; text-align: center; background: #eee;}
ul.pagination li {display: inline; font-size: 0.625em; padding: 0.5em;}
ul.pagination li.active {background: #fff; border: 1px solid #eee;}

Use similar styles to achieve the effect you want.

Thanks to Craig Valadez of struc1.com for suggesting this tip.

12 Comments Comment feed

Awesome plugin. Really easy to use and very configurable.

  • Niklas
  • 1 April 2009
  • #

Hi. I’m a bit of a beginner here… How do you make this section sensitive. In my implementation pagination links point to the main template. Easy solutions? Or am I just using the code in a wrong manner?

Depends what you need. The plugin will paginate the results in the current section. If you are using a page template for more than one section, you could use and if conditional like my example above <txp:if_section name="articles" to output pagination for the section of your choice.

  • Niklas
  • 3 April 2009
  • #

Oh. I use <txp: if_section name”“ and now I found the reason why it’s not working. I use <base href=“http://mysite.com/” /> to find the right paths to site’s visual elements (pics). If I remove that… well, the pictures don’t show in the right way. Is there anything I can do about that. Making absolute urls to all pictures doesn’t really seem an option. Huh.

BTW. Thanks again for your help and great plugin!

Glad you got it working – not sure why you need absolute URL’s for your images using a base href tag. Relative URL’s are much better for future portability. Have you thought of using the site_url tag for your image links?

  • Niklas
  • 3 April 2009
  • #

Hmmm… I use relative path <img src="images/myimage.gif" /> in my image links. However, for some reason without base href tag or absolute urls images aren’t displayed in the other sections on my site. I’ve scanned for possible solutions to the problem… without all-encompassing results.

If you are using Textpattern for image management, then you should instead use something like <img src="/images/23.gif" />. Note the leading slash. You can also upload your own images to the /images folder, but you still need the leading slash.

  • kus
  • 18 April 2009
  • #

very nice, thanks you :D

  • Mark
  • 22 April 2009
  • #

I’ve been having problems with this and found this page whilst trying to resolve it.
Even copying your code into my section exactly as it is, only modifying my article form name and section name, it outputs nothing. Zero. Zilch.
Any suggestions would be phenomenally helpful!
Forum thread with details.

Hello
Does anybody know if this pluggin is compatible with MLP (Multi Language Pack) ?
In my case, it doesn’t work. It targets to home :-(
Regards from Argentina

@Fernando – I think the ob1_googlenav plugin won’t work with MLP as it won’t recognize the URL rewrites, as you have found…

Fernando: I don’t remember exactly what the output of <txp:ob1_pagination /> is, but something like this should work:

Install etc_query and etc_url plugins. Then store the page url (with pg parameter stripped) in url variable:

<txp:variable name="url" value='<txp:etc_url query="pg" />' />

Finally, replace the href’s in <txp:ob1_pagination /> output by new values with etc_query:

<txp:etc_query data='<txp:ob1_pagination />' query="li" replace="a@@href={?url}?pg={#row}" wraptag="ul" class="pagination" />

You will probably need to adapt it to your case (e.g. replace ?pg={#row} by &pg={#row}), but it is feasible.

Add a comment

Use Textile help to style your comments