Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
3 posts Page 1 of 1
Hi,

I was wondering how to add pagination similar to webcomics where there is a "first" link that goes to the first page, a "previous" link that goes one page back. a "next" link that goes one page forward, and a "newest" link that goes to the newest page.

Thanks!
Hi and welcome, Aramourn :)

Broadly speaking, a webcomics site comprises of individual 'stories' where each story consists of several 'pages' (usually a full image represents each page).

The navigation that you mentioned then works only in the context of a single story where
<<First <<Previous Next>> Last>>
links lead to the 'pages' of that story.

To create such a webcomics (and also its associated navigation), I think the easiest way would be to use 'repeatable regions' (another way would be to use 'relations').

For my own testing, I recreated a part of the following webcomics site I found - http://www.inkystories.com/?webcomic_po ... e-01-of-11

I'll explain the approach I took below.
Code: Select all
<cms:template clonable='1'>
       
    <cms:repeatable name='my_pages' label='Pages' >
        <cms:editable type='image' name='page_image' label='Page Image' show_preview='1' preview_width='150' input_width='200' />
        <cms:editable type='nicedit' name='page_summary' label='Page Summary' />
    </cms:repeatable>
   
    <cms:editable name='plot_summary' label='Plot Summary' type='nicedit' />
   
</cms:template>

We begin by using a clonable template. The idea is that each cloned page would represent a distinct 'story' (of course, we can further use 'folders' etc. to categorize the stories but for simplicity sake I am not doing that here).

As seen in the definition of the editable regions above, the repeatable region named 'my_pages' is the one that will be the key for us. Each row of this region will hold an image (usually a scanned single page of the story) and an optional summary of that page.
A non-repeatable region 'plot_summary' can optionally hold a text synopsis of the story itself.

So, when we add a story, we create a new clonable page and then add each 'page' of the story as a row of the repeatable region.
screenshot.gif
screenshot.gif (137.89 KiB) Viewed 2186 times


While displaying, we do not display all the 'pages' of the story at once. Instead, we display only the first page (i.e. row) to begin with and show navigation links that lead to the other pages (rows) of the repeatable regions.

The links actually point to the same cloned page but tack a parameter named 'part' to the end of the querystring. This specifies the page of the story the user is accessing.

Following is the full code of the template (the markup has been kept intentionally very simple).
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>

<cms:template clonable='1'>
       
    <cms:repeatable name='my_pages' label='Pages' >
        <cms:editable type='image' name='page_image' label='Page Image' show_preview='1' preview_width='150' input_width='200' />
        <cms:editable type='nicedit' name='page_summary' label='Page Summary' />
    </cms:repeatable>
   
    <cms:editable name='plot_summary' label='Plot Summary' type='nicedit' />
   
</cms:template>

<cms:php>
    // Get the selected part from the querystring and save it as a Couch variable named 'selected_page'
    global $FUNCS, $CTX;
    $part = ( isset($_GET['part']) && $FUNCS->is_non_zero_natural($_GET['part']) ) ? (int)$_GET['part'] : 1; // Default part is 1
    $CTX->set( 'selected_page', $part, 'global' );
</cms:php>

<!-- loop through our repeatable images -->
<cms:show_repeatable 'my_pages' >

    <!-- but show only the seleted one -->
    <cms:if k_count=selected_page >
        <div>
            <b><cms:show k_page_title /></b> <cms:show k_count /> of <cms:show k_total_records />
        </div>
       
        <!-- We'll need to show the nav twice so to avoid duplication of effort we save it in a variable -->
        <cms:capture into='my_nav' >
            <li class="first"><a href="<cms:add_querystring k_page_link "part=1" />" class="first <cms:if k_count='1' >inactive</cms:if>" ><span>« First</span></a></li>
            <li class="prev"><a href="<cms:add_querystring k_page_link "part=<cms:sub k_count '1' />" />" class="previous <cms:if k_count='1' >inactive</cms:if>" ><span>‹ Previous</span></a></li>
            <li class="next"><a href="<cms:add_querystring k_page_link "part=<cms:add k_count '1' />" />" class="next <cms:if k_count=k_total_records >inactive</cms:if>" ><span>Next ›</span></a></li>
            <li class="today"><a href="<cms:add_querystring k_page_link "part=<cms:show k_total_records />" />" class="last <cms:if k_count=k_total_records >inactive</cms:if>" ><span>Last »</span></a></li>
        </cms:capture>
       
        <!-- top nav -->
        <ul class="page-nav-top">
            <cms:show my_nav />
        </ul>
       
        <!-- main page image -->
        <img src="<cms:show page_image />" />
       
        <!-- bottom nav -->
        <ul class="page-nav-bottom">
            <cms:show my_nav />
        </ul>
       
        <!-- text details -->
        <div>
            <cms:show plot_summary />
            <hr />
            <cms:show page_summary />
        </div>   

    </cms:if>
</cms:show_repeatable >

<?php COUCH::invoke(); ?>

Please note that the navigation we generate adds the 'inactive' class to links that do not apply to certain pages (e.g. First and Previous make no sense when we are on the very first page of the story. Similar argument holds for the 'Next' and 'Last' links when on the very last page).
You can use CSS to properly style them (hide or make inactive).

Hope this helps. Do let us know.
Thank you so much for the quick reply, and for keeping it simple! This was just what I was looking for.
3 posts Page 1 of 1

Who is online

In total there are 2 users online :: 0 registered, 0 hidden and 2 guests
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 2 guests

cron