Create An Online Photo Gallery, Part 2

More Functions!!

[Editor’s note: If you haven’t read the previous installment of this project, you should read it through before beginning this article.] In the last installment of our Image Gallery project, we just finished the creation of the get_items function. That was one long function! Fortunately, the others are shorter. We have three different functions that do about the same thing. They take the items in the array “lst” and display them in table format. The main differences are the links for them. Here is the function:

Code For: gen_page()
function gen_page($cat=''){
	// Generates the display of the icons for the user to choose
	// Loop through all the files and use their
	// file-names as proper links
	// for their sub-directories/thumbs displays
	if($cat == ''){
		$this->out = '$lt;tr>';
		$i = 1;
		foreach($this->lst as $f){
$this->out .= '$lt;td style="text-align: center;">
$lt;a href="photos.php?cat='.$f.'" alt="Category: '.$this->clean($f).'">
$lt;img src="'.$this->ico.'fldr.gif" alt="'.$this->clean($f).'">
$lt;br>'.$this->clean($f).'$lt;/a>$lt;/td>';
/*
Here we deal with the width of our table.  We want 5 images across,
by however many rows it takes to complete the set.  To do that, we
set a variable ($i) to "1" and then start our loop.  It increments at
the end, just before the next item.  When we reach the 5th itteration,
the following if() statement catches it using the modulus operator and
inserts the end of our row and beginning of another.
*/
	if($i%$this->cols == 0){
		// If we have reached 5
		$this->out .= '$lt;/tr>$lt;tr>';
		}
		$i++;
		}
	}
	else{
		$this->out = '$lt;tr>';
		$i = 1;
		foreach($this->lst as $f){
			$this->out .= '$lt;td style="text-align: center;">
			$lt;a href="photos.php?cat='.$cat.'&evt='.$f.'" alt="Event: '.$this->clean($f).'">
			$lt;img src="'.$this->ico.'fldr.gif" alt="'.$this->clean($f).'">
			$lt;br>'.
			$this->clean($f).'$lt;a>$lt;/td>';
			if($i%$this->cols == 0){
				$this->out .= '$lt;/tr>$lt;tr>';
			}
			$i++;
		}
	}
	echo $this->out;
}

What this function does is, if the variable $cat is empty, it generates the page as a category view; if the $cat variable is populated then it displays events within the category. It loops through and creates a link in the form of: photos.php?cat=XXX or photos.php?cat=XXX&evt=YYY. Fairly simple right?

The next function generates the thumbnail view of the event chosen. This is a fairly straightforward function. I’ve commented it fairly well, but I’ll also explain it here.

Code For: gen_thumbs()
function gen_thumbs($cat, $evt){
	// Generates the thumbnail display
	// Loop through all thumbs, and use their file-names as proper links
	// for their larger counterpart.
	$img_path = $this->_rt.$cat.'/'.$evt.'/thumbs/';
	$i = 1;
	$this->out = '$lt;tr>'."n";
	if(count($this->lst)>=1){
		foreach($this->lst as $f){
			$this->out .= '$lt;td style="text-align: center;">$lt;a href="photos.php?cat='.$cat.'&evt=
'.$evt.'&pic='.$f.'">$lt;img src="'.$img_path.$f.'" alt="'.$this->clean($evt).' '.substr($f, 0, -4).'">$lt;/a>$lt;/td>'."n";
			if($i%$this->cols==0){
				$this->out .= '$lt;/tr>'."n".'$lt;tr>';
			}
			$i++;
		}
		if($i%$this->cols!==0){
			$this->out .= '$lt;/tr>'."n";
		}
	}
	else{
		$this->out .= '$lt;td>There are no images to display in this event.$lt;/td>$lt;/tr>';
	}
	echo $this->out;
}

With the above function, we loop through the “lst” array which holds the file names of each image within the directory. We use those filenames to populate the $pic variable in the URL so that the larger image can be shown. We also use the filename to display a thumbnail from the thumbs directory.

NOTE: The naming of the images is crucial. You must name the image and the thumbnail the same! They are in two different directories specifically for that purpose.

To finish up the gen_thumbs() function, if the “lst” array is actually empty, then we output a message saying “there are no images to display in that event.”

Finally, our last main function (there are plenty more to look at) is used to generate the actual picture. It’s pretty straight-forward. Take the $pic variable and use that to display the image within a column and row of our table.

Code For: gen_pic()
function gen_pic($cat, $evt, $pic){
	// Generates the picture display
	// Take the path from above (get_items()) and use that to generate path
	// to large photo and display to browser.
	$path = $this->_rt.$cat.'/'.$evt.'/'.$pic;
	$this->out = '$lt;tr>$lt;td style="text-align: center; font-weight: bold;">'.$this->clean($cat).':
'.$this->clean($evt).'$lt;br>';
	$this->out .= substr($pic, 0, -4).'$lt;/td>$lt;/tr>';
	$this->out .= '$lt;tr>$lt;td style="text-align: center;">$lt;img src="'.$path.'">$lt;/td>$lt;/tr>';
	$this->out .= '$lt;tr>$lt;td style="text-align: center;">'.$this->paginate($cat, $evt, $pic).'$lt;/td>$lt;/tr>';
	echo $this->out;
}

Easy enough right? It’s very similar to the previous functions, however, it does introduce a few new functions in it, such as paginate() and clean(). The next page will discuss all the other functions that have not been discussed thus far.