In my previous article, Create a Simple Picture Gallery using PHP, KDM dropped me a nice comment about adding pagination.

In order to satisfy his needs (and our own), this post will present simple PHP gallery pagination. If you haven’t read the previous article, please refer back to it.

We’ll start with the previous code.

The first requirement is to split up getPictures() into multiple functions. The size of this large function makes it hard to edit the Simple PHP Gallery.

We can move the section that creates the thumbnail into a separate function, makeThumb($file, $type).

The new getPictures() is as follows:

	function getPictures() {
		if ( $handle = opendir(".") ) {
			$lightbox = rand();
			echo '<ul id="pictures">';
			while ( ($file = readdir($handle)) !== false ) {
				if ( !is_dir($file) && ($type = getPictureType($file)) != '') {
					if ( ! is_dir('thumbs') ) {
						mkdir('thumbs');
					}
					if ( ! file_exists('thumbs/'.$file) ) {
						makeThumb($file, $type);
					}
					echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
					echo '<img src="thumbs/'.$file.'" alt="" />';
					echo '</a></li>';
				}
			}
			echo '</ul>';
		}
	}

makeThumb($file, $type) is defined as:

	function makeThumb($file, $type) {
		global $max_width, $max_height;
		if ( $type == 'jpg' ) {
			$src = imagecreatefromjpeg($file);
		} else if ( $type == 'png' ) {
			$src = imagecreatefrompng($file);
		} else if ( $type == 'gif' ) {
			$src = imagecreatefromgif($file);
		}
		if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
			$newW = $oldW * ($max_width / $oldH);
			$newH = $max_height;
		} else {
			$newW = $max_width;
			$newH = $oldH * ($max_height / $oldW);
		}
		$new = imagecreatetruecolor($newW, $newH);
		imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
		if ( $type == 'jpg' ) {
			imagejpeg($new, 'thumbs/'.$file);
		} else if ( $type == 'png' ) {
			imagepng($new, 'thumbs/'.$file);
		} else if ( $type == 'gif' ) {
			imagegif($new, 'thumbs/'.$file);
		}
		imagedestroy($new);
		imagedestroy($src);
	}

It’s now time to add pagination. We should create another setting, $per_page, which will hold the number of images we’ll show per page.

The URL will use the format ?page=x, where x is the page number. In the PHP code, we’ll need to fetch this value using the $_GET[] array.

	# SETTINGS
	$max_width = 100;
	$max_height = 100;
	$per_page = 5;

	$page = $_GET['page'];

Now that we have the page number, we need a way of accessing the corresponding images.

To accomplish this, we should skip the files between 0 and the first image on that page. The amount to skip is the page number multiplied by the amount of images per page, assuming the first page is page 0.

The following code, which we will put directly before the main loop, does exactly this:

	$count = 0;
	$skip = $page * $per_page;

	while ( $count < $skip && ($file = readdir($handle)) !== false ) {
		if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
			$count++;
	}

Of course, the main loop needs to be modified to accompany this change:

	$count = 0;
	while ( $count < $per_page && ($file = readdir($handle)) !== false ) {

We must now give the user a way to navigate between pages.

We should add two variables, $has_previous and $has_next, that will deal with this problem. They will be used to add links in the HTML after <?php getPictures(); ?>:

<?php getPictures(); ?>

<?php
	if ( $has_previous )
		echo '<p class="prev"><a href="?page='.($page - 1).'">← Previous Page</a></p>';

	if ( $has_next )
		echo '<p class="next"><a href="?page='.($page + 1).'">Next Page →</a></p>';
?>

Originally, the two variables will be set to false:

	$has_previous = false;
	$has_next = false;

If $skip is not 0, then the user isn’t situated on the first page. Thus, $has_previous must be true:

	if ( $skip != 0 )
		$has_previous = true;

This must be added after $skip = $page * $per_page.

Next, $has_next should be set to true if there are any more image files. This snippet will be placed at the end of the function:

	while ( ($file = readdir($handle)) !== false ) {
		if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
			$has_next = true;
			break;
		}
	}

Thus, the final code is:

	function getPictures() {
		global $page, $per_page, $has_previous, $has_next;
		if ( $handle = opendir(".") ) {
			$lightbox = rand();
			echo '<ul id="pictures">';

			$count = 0;
			$skip = $page * $per_page;

			if ( $skip != 0 )
				$has_previous = true;

			while ( $count < $skip && ($file = readdir($handle)) !== false ) {
				if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
					$count++;
			}
			$count = 0;
			while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
				if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
					if ( ! is_dir('thumbs') ) {
						mkdir('thumbs');
					}
					if ( ! file_exists('thumbs/'.$file) ) {
						makeThumb( $file, $type );
					}
					echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
					echo '<img src="thumbs/'.$file.'" alt="" />';
					echo '</a></li>';
					$count++;
				}
			}
			echo '</ul>';

			while ( ($file = readdir($handle)) !== false ) {
				if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
					$has_next = true;
					break;
				}
			}
		}
	}

Have fun with your pagination. Until next time!