Mar 26

In one of my CMS projects, I ran across a case where the user created a post of very long content that scrolled endlessly down the page. In an effort to make the content more easily readable, I created a Pagination helper that breaks that content into discrete blocks of content with "next" and "prev" links.

The visibility of the content is controlled through script.aculo.us Effects.

The benefit of using this helper is that all of the content is still on the page, for SEO.

To use this helper, all you have to do is add "[page]" markers in your content, which indicate places where you want the content to break into a new "page".

Enable the helper in your controller:

PLAIN TEXT
PHP:
  1. var $helpers = array("Html", "Pagination");

In your view, render the paginated content:

PLAIN TEXT
PHP:
  1. <?php echo $pagination->paginateContent($content_for_layout); ?>

Helper

PLAIN TEXT
PHP:
  1. class PaginationHelper extends Helper
  2. {
  3.     /**
  4.      * Parses a string of content for [page] blocks, and replaces them with div tags for dynamic control over
  5.      * content section visibility.
  6.      *
  7.      * @access public
  8.      * @since 1.0.0
  9.      * @param string $strContent The content to parse and paginate
  10.      * @return string The paginated content
  11.      *
  12.      **/
  13.     function paginateContent($strContent)
  14.     {
  15.         $strPaginated = '';
  16.         $arrSections = explode('[page]', $strContent);
  17.         if(count($arrSections)> 0)
  18.         {
  19.             for($i=0;$i<count($arrSections);$i++)
  20.             {
  21.                 $arrSections[$i] = preg_replace("/<br([^>]+)>/i", "", $arrSections[$i], 1);
  22.                 $curIndex = $i + 1;
  23.                 $prevIndex = $i == 0 ? 1 : $curIndex - 1;
  24.                 $nextIndex = $i>= count($arrSections) ? count($arrSections) : $curIndex + 1;
  25.                
  26.                 $pageID = 'page'.$curIndex;
  27.                 $nextPage = 'page'.$nextIndex;
  28.                 $prevPage = 'page'.$prevIndex;
  29.                
  30.                 // Handle first block
  31.                 if($i == 0)
  32.                 {
  33.                     $strPaginated .= '<div id="'.$pageID.'" class="contentblock">'.$arrSections[$i];
  34.                     if(count($arrSections)> 1)
  35.                     {
  36.                                             $strPaginated .= '<a class="pagelink" href=javascript:void(0); onclick="switchPage(\''.$nextPage.'\');">More></a>';
  37.                     }
  38.                                         $strPaginated .= '</div>';
  39.                 }
  40.                 else
  41.                 {
  42.                     // Hide the other blocks
  43.                     $strPaginated .= '<div id="'.$pageID.'" class="contentblock" style="display:none;">'.$arrSections[$i];
  44.                    
  45.                     if($curIndex <count($arrSections))
  46.                     {
  47.                         $strPaginated .= '<a class="pagelink" href=javascript:void(0); onclick="switchPage(\''.$nextPage.'\');">More></a>';
  48.                     }
  49.                    
  50.                     $strPaginated .= '<a class="pagelink" href=javascript:void(0); onclick="switchPage(\''.$prevPage.'\');"><Prev</a>';
  51.                    
  52.                     $strPaginated .= '</div>';
  53.                 }
  54.             }
  55.            
  56.             return<<<PAGE_CODE
  57. $strPaginated         
  58. <script type="text/javascript">
  59. var currentPage = 'page1';
  60. </script>
  61. PAGE_CODE;
  62.            
  63.         }
  64.         return $strContent;
  65.    
  66.     } // End Function
  67.  
  68.  
  69. } // End Class

You'll also need to add some javascript code to handle the switching of visible content blocks:

PLAIN TEXT
JavaScript:
  1. function switchPage(thePage)
  2. {
  3.     if(window.currentPage)
  4.     {
  5.         if(thePage != window.currentPage)
  6.         {
  7.             new Effect.Fade(window.currentPage);
  8.             window.currentPage = thePage;
  9.             new Effect.Appear(thePage, {delay:0.5});   
  10.         }
  11.     }
  12. }

tags:

Posted in PHP, CakePHP | 1 Comment »