Newscoop 3 Cookbook

Pagination of lists and long articles

Pagination means dividing content into discrete pages, each displaying a page number. When a long list of search results is divided into more than one page, allowing the reader to proceed from page to page, that's pagination.

In this chapter, you will learn an advanced method for list pagination, and how to use subtitles to break up long articles.

Pagination of a long article list

Sometimes you might want to split a long list of articles into pages. You might do this on Section pages to show all articles in that particular section, without requiring the reader to scroll down too much.

To implement pagination we need to add an extra page parameter to a URL, something like the following example:

http://site_name/language_code/issue_number/section_number/?page=number

Then we can use the GET parameter to check the page we are on. We will use Smarty directly to check GLOBAL variables:

{{ if $smarty.get.page }}{{ assign var="page" value=`$smarty.get.page` }}{{ else }}{{ assign var="page" value="1" }}{{ /if }}

To split a list of articles into pages we will use a column parameter, which will control how many articles should be shown on a page. In this case, row parameter will be the actual page.

... {{ if $gimme->current_list->count > 10 }} ...
... {{ if $gimme->current_list->row == $page }} ...

In this example, we also need to add the ignore_issue parameter to get articles from all issues. The first part of the code, which will show the articles, would be:

{{ if $smarty.get.page }}
    {{ assign var="page" value=`$smarty.get.page }}{{ else }}{{ assign var="page" value="1" }}{{ /if }}
    {{ list_articles columns="10" ignore_issue="true" }}
    {{ if $gimme->current_list->row == $page }}
        <div class="list-articles"><a href="{{ uri options="article" }}">{{ $gimme->article->name }}</a>{{ $gimme->article->intro }}</div>
    {{ /if }}
    {{ /list_articles }}
    ...

In the second part of the code we will show page numbers, and add the page parameter to links. To do this, we will need to list the articles once again:

{{ list_articles columns="10" ignore_issue="true" }}
{{ if $gimme->current_list->count > 10 }}
    {{ if $gimme->current_list->at_beginning }}
        <div class="list-page-numbers">Page:
    {{ /if }}
    {{ if $gimme->current_list->column == 1 }}
        {{ if $gimme->current_list->row == $page }}
            <span>{{ $gimme->current_list->row }}</span>
        {{ else }}
            <a href="{{ uri options="article" }}?page={{ $gimme->current_list->row }}">{{ $gimme->current_list->row }}</a>
        {{ /if }}
    {{ /if }}
    {{ if $gimme->current_list->at_end }}
        </div>
    {{ /if }}
{{ /if }}
{{ /list_articles }}

You will now have a list of articles and a list of page numbers, as shown in the screenshot below. You are free to add additional styles and controls to make your list shine.


Subtitles inside long Article Fields

You can include subtitles (also known as subheads) in longer articles, to break the article into pages. The journalist uses the WYSIWYG editor, marks the subtitle in the text and selects "campsite_subhead" from the pulldown menu under "styles". A simple list of all subtitles inside the article can be displayed on the article page like this:

<ul>
{{ list_subtitles field_name="full_text" }}
    <li>{{ $gimme->subtitle->name }}</li>
{{ /list_subtitles }}
</ul>

Note that inside list_subtitles you need to specify the article field which you are working with, in this case the field full_text. The subtitles listed will all be from this particular article field, rather than any other field that may contain subtitles.

Adding a simple "previous" and "next" navigation from article subtitle to article subtitle can be done like this:

{{ if $gimme->article->full_text->has_previous_subtitles }}
    <a href="{{ uri options="previous_subtitle full_text" }}">Previous</a>
{{ else }}
    Previous
{{ /if }}
|
{{ if $gimme->article->full_text->has_next_subtitles }}
    <a href="{{ uri options="next_subtitle full_text" }}">Next</a>
{{ else }}
    Next
{{ /if }}

This navigation will display active links to "Previous" or "Next" only if there is a previous or next item in the list. Otherwise, the words Previous and Next are not clickable, and are just displayed for design reasons, so the eye does not need to jump back and forth.

Once you are using subtitles in an article with pagination, the content will no longer be displayed in a single page format. In order to display the entire article in a single page (e.g. for printing) you can use a link with options like this:

<a href="{{ uri options="all_subtitles full_text" }}">View entire article</a>