Build An Automated PHP Gallery System In Minutes

Viewing Category Listings With Their Images

Now that we have successfully uploaded our images and have created their automatic thumbnails, we come to the part where we showoff a little. We require a system to display our categories and the image listings present in those categories. First, let’s name our new script, viewgallery.php. Using this script we’ll be able to display the 3 types of screens:

1. Category Listings
   
2. Thumbnail Listings for a category
   
3. The full-size Image

Therefore we need to divide this script into 3 parts:

1. When there is no input, we display the category listing
   
2. When we have the category id as a single input, we display the thumbnails for that category
   
3. When we have both the image id and the category id as inputs, we display the full-size image

Screen 1: Category Listing

To display the category list, we need to build a system that automatically creates html rows for any N number of categories.

The following code performs very simple tasks. We simply list all current categories in our database, along with the number of images they hold. Using this code, we can control the number of category links that appear in a given row. The value stored in $number_of_categories_in_row allows us to achieve this.

The procedure is:

1. Fetch the list of all categories, and the number of images each holds
   
2. The number of links in row controlled by value is assigned to $number_of_categories_in_row
   
3. Create display via tables

if(empty($cid) && empty($pid)) {      
 $number_of_categories_in_row = 4;      
     
 $result = mysql_query("      
   SELECT      
     c.category_id,      
     c.category_name,      
     COUNT(photo_id)      
   FROM      
     gallery_category AS c LEFT JOIN      
     gallery_photos AS p ON      
     p.photo_category = c.category_id      
   GROUP BY c.category_id      
 ");      
 while ($row = mysql_fetch_array($result)) {      
   $result_array[] =      
     '<a href="viewgallery.php?cid=' . $row[0] . '">' .      
     $row[1] . '</a> (' . $row[2] . ')';      
 }      
 mysql_free_result($result);      
     
 $result_final = '<tr>\n';      
 foreach ($result_array as $category_link) {      
   if ($counter == $number_of_categories_in_row) {      
     $counter = 1;      
     $result_final .= "\n</tr>\n<tr>\n";      
   } else $counter++;      
   $result_final .= "\t<td>" . $category_link . "</td>\n";      
 }      
     
 if ($counter) {      
   if ($number_of_categories_in_row - $counter)      
     $result_final .= "\t<td colspan='" .      
       ($number_of_categories_in_row - $counter) . "'>&nbsp;</td>\n";      
     
   $result_final .= "</tr>";      
 }      
}

Our output will look something like this:

Screen 2: Thumbnail Listing for Category

The value for the category id via the input variable cid is required for this screen to appear, e.g. viewgallery.php?cid=1

In this screen, we have to list the thumbnails of a given category, for which we received the category id via the input. The code for this screen is very similar to the category listing code, but the output structure is considerably different. The code fetches the filenames of all the images in a given category and then, using the naming convention tb_filename, we list all the thumbnails with their appropriate links. In addition to that, the variable $number_of_thumbs_in_row is used to set the number of thumbnail links that will be listed in a given row.

else if ($cid && empty($pid)) {      
 $number_of_thumbs_in_row = 5;      
     
 $result = mysql_query("      
   SELECT      
     photo_id,      
     photo_caption,      
     photo_filename      
   FROM gallery_photos      
   WHERE photo_category = '" . addslashes($cid) . "'      
 ");      
 $nr = mysql_num_rows($result);      
     
 if (empty($nr))      
   $result_final = "\t<tr><td>No Category found</td></tr>\n";      
 else {      
   while ($row = mysql_fetch_array($result)) {      
     $result_array[] =      
       "<a href='viewgallery.php?cid=$cid&pid=" . $row[0] .      
       "'><img src='" . $images_dir . "/tb_" . $row[2] .      
       "' border='0' alt='" . $row[1] . "' /></a>";      
   }      
   mysql_free_result($result);        
     
   $result_final = "<tr>\n";      
     
   foreach ($result_array as $thumbnail_link) {      
     if ($counter == $number_of_thumbs_in_row) {        
       $counter = 1;      
       $result_final .= "\n</tr>\n<tr>\n";      
     } else $counter++;      
     $result_final .= "\t<td>" . $thumbnail_link . "</td>\n";      
   }      
     
   if ($counter) {      
     if ($number_of_photos_in_row - $counter)      
       $result_final .= "\t<td colspan='" .      
         ($number_of_photos_in_row - $counter) .      
         "'>&nbsp;</td>\n";      
   }      
     
   $result_final .= "</tr>";      
 }      
}

Our output will look something like this: