MegaGallery, Part 6: Pagination with PHP

Pagination, for our purpose here, is the system of numbering pages. With a very large gallery, you will want to break it down into page size elements to keep the viewer from having to scroll through a long, single page of images. We will do this with PHP in order for it to work even when javascript is disabled.

Add a Constant for Rows Per Page

In our settings file, we want to add a constant for the number of rows for a page. This will help us determine how many images we will have on each and the number of total pages. After we add our constant (ROWS_PER_PAGE), our settings.php file looks like this:

< ?php
define("GALLERY_TITLE", "Biltmore Visit");
define("IMAGE_DIR", "./pix");
define("IMAGES_PER_ROW", 4);
define("ROWS_PER_PAGE", 2);

Notice the last definition, where we define the ROWS_PER_PAGE.

Adding and Processing Variables

We will change a few of our previous variables and add a few new ones. The big change is the name of the variable to receive the return from scandir(). We will change it from $files to $arr_files. This makes it easier to change our code when we split the filenames into pages.

$arr_files = scandir(IMAGE_DIR);

Cleaning Up the Array

We know that the first two entries from the array our the directory listings . and .. We need to get rid of these in order for our paging process to work. We will use the unset() function to get rid of these.


Split the Array Into Pages

First, we need to get the number of images for each page. The number of images = images per row X rows per page. Our constants will help us get this figure. Then we will use the function array_chunk() to split our array into pages.

$images_per_page = IMAGES_PER_ROW * ROWS_PER_PAGE;
$files = array_chunk($arr_files, $images_per_page);

The array_chunk() function works very well for our purposes here. The function takes two parameters that we will use: the array and the chunk size. You will notice we used our calculated $images_per_page for the chunk size. The function array_chunk() creates a multidimensional array with each dimension being chunk size in length. Keep in mind that the last dimension could be smaller than chunk size.

Checking and Setting the Page Number

Later, we will be passing the page number to the script using the URL, but before we do, we need to set up a check and assignment for the page number. The count() funtion will give us the number of elements in the first dimension of the $files array. We will use isset() and the super global $_REQUEST to check if this is the first time to the gallery. If it is, we will set the page number to 0.

$num_of_pages = count($files);
if (isset($_REQUEST['page'])) {
 $page = $_REQUEST['page'];
else {
 $page = 0;

The Processing Loop

We will need to make two changes to our processing loop. Since we are removing the two directory listings, we no longer need the if statement. Aloso, we need to change how we address the $file array, addressing the dimension according to our page number.

foreach ($files[$page] as $file) {
 $fullPath = IMAGE_DIR . "/" . $file;
 $tpl->assign (array (
 "IMAGE" => $fullPath,
 "COMMENTS" => getComment($fullPath),
 "THUMB" => createThumbnail($fullPath)));
 $tpl->parse("LIST", ".list");

 // Once we have retrieved IMAGES_PER_ROW images, we need to start over with a new ul
 if ($i > IMAGES_PER_ROW) {
 $tpl->parse("IMAGES", ".images");
 $i = 1;
 } // end if $i > IMAGES_PER_ROW
} // end foreach

Setting Up the Page Navigation

Underneath our gallery div, we placed a new div with the id of pagenav. There we put two plaeholders for FastTemplates to fill in and create our page navigation.

<div id="pagenav">



Next, we need to fill in the placeholders according to the page we are on.

if ($page > 0) {
 $tpl->assign(array("PREV" => "<a href='index.php?page=" . ($page - 1) . "'>Prev Page</a>" )) ;
else {
 $tpl->assign(array("PREV" => ""));

if (($page + 1) < $num_of_pages) {
 $tpl->assign(array("NEXT" =>  "<a href='index.php?page=" . ++$page . "'>Next Page</a>" ));
else {
 $tpl->assign(array("NEXT" => ""));

In the first if statement, we check to see if the page number is greater than 0 (i.e. we are on a page other than the first). If so, we assign a link string to the PREV placeholder with a link to the previous page. Otherwise, we assign an empty string to the PREV placeholder.

In the second if statement, if the page number plus 1 is less than the number of pages, we assign the NEXT placeholder a link string to the next page. We have to add 1 because the array and our page numbers are 0 based rather than 1 based (i.e. the first page is 0).

Add CSS to the navigation to make it look how you want. I had PREV float left and NEXT float right.

We now have our system for creating a multiple page gallery. Here are some screen shots of the results or have a look at the Completed Project.

The first page of the gallery w/ two rows set as _ROWS_PER_PAGE

The first page of the gallery w/ two rows set as _ROWS_PER_PAGE

A middle page of the gallery

A middle page of the gallery

Last Page of gallery

Last Page of gallery


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s