Creating An Image Management System for Your Website with Smart Image Resizer and Lightbox 2

When I was developing this site, I decided early on that I wanted to use Lightbox 2 as my primary image viewing module. It's attractive and suits the clean look on my site. However, as I started adding more CMS features to my site through PHP, I realized I would need software that would automatically resize images as well.

Enter Smart Image Resizer. As its name implies, it doesn't just reduce the physical size of the image, but also does so so that the image can be cropped and resized gracefully. Even if you blow up the image a bit, it will be filtered so as not to become pixelated.

These two solutions are all well and good, but in order to make them work together properly, I had to write some of my own code through PHP to generate the final HTML.

Experience requirement: Intermediate
Be aware: I do not recommend a straight copy/paste method approach to this code. Understand what you are using and how secure or flexible you want the inputs to be. I don't supply secure code.

The Tools
First thing, Lightbox 2 uses Scriptaculous and Prototype, so you'll have to make sure you have those installed. Please follow the directions on those sites to make your site ready to go.

The basic way to instantiate Lightbox 2 is through the following code:


<!-- For single samples attached to a link -->
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

<!-- For multiple samples attached to an image link -->
<a href="images/image-1.jpg" rel="lightbox[group]" title="my caption"><img src="images/image-1_thumb.jpg"></a>
<a href="images/image-2.jpg" rel="lightbox[group]" title="my caption"></a>


In the code above, you can see the example of how a link might use the lightbox, versus an imagelink. This should be pretty straightforward. Things get a little more interesting when you decide to take advantage of Lightbox 2's version of albums, as seen in the second example. You don't need a physical link to appear for additionally grouped images to appear in the same lightbox album. For this reason, this module worked well for me, as I wanted to have single images represent a link to items that had multiple pages worth of samples in the same category.

Image Resizer is cool because it uses a PHP script referred to in the <img> tag to automatically place in the resized image.


<!-- Notice how HTML needs the path to the image.php file (SIR's path, basically), followed by a '/' and the filename, followed by various parameters that you can pass through to SIR. -->

<img src="/php/image.php/samplefile.jpg?width=150&height=150&cropratio=1:1&#8465;=/samplefile.jpg" />


The PHP
Now that we have our essential HTML elements in place, we need a way to upload and manage the files. I decided, rather than uploading files directly to the database (a method with the potential of slowing down my site because of heavy database access), I would create a process that uploads the files into a designated folder on my server, and also updates the database at the same time.

1. Step 1 is creating the form. Mine looks something like this, and the code looks something like this:
   
   
   <p><b>Work Samples</b></p>
   <form enctype="multipart/form-data" action="post.php?cmd=samples" method="POST">
       <p>Please select the file you want to upload<br />
       <input name="uploadedfile" type="file" />
       <p>What category is this going into?<br />
       <select name="category">
           <option value="interactive">Interactive</option>
           <option value="print">Print</option>
       </select><br />
       <p>Enter a title for this sample:<br>
       <input type="text" name="title" size="50" /></p>
       <p>If this file's going to be part of a group, enter the group designation here (try to keep it one word, no spaces):<br>
       <input type="text" name="grouping" size="10" /></p>
       <input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
       <input type="submit" value="Upload File" />
   </form>
   
   
   I've broken my example uploads into this: I want to be able to group images first by whether they are print or interactive examples. Next, I want to be able to add titles that may appear in the Lightbox 2 info pane. Lastly, I want to be able to allow images of a particular group to appear as multiple pages of a lightbox.
   
   
2. Now that I know what I want to do with my images, I need to figure out the particulars of the operation. First up is handling the upload of the file. Personally, I had the two categories that I wanted to sort through, but let's assume you do not.
   
   
   $filename = basename($_FILES['uploadedfile']['name']);
   
   // $target_path determined by where you are planning on
   // placing your files on the server.
   // You must manually type in the path to the file.
   $target_path = $target_path . basename($_FILES['uploadedfile']['name']);
   
   // The command in this if statement is the actual command
   // that uploads your file into the server.
   if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path))
   {
       echo '<br><div id="successful"><span>The file ' . basename( $_FILES['uploadedfile']['name']) . ' has been uploaded</span></div><br>';
   }
   
   else
   {
       echo '<br><div id="failed">There was an error uploading the file, please try again!</div><br>';
   }
   
   // This portion updates the database with
   // the relevant information.
   if(isset($_POST['category']))
   {
       $title = htmlspecialchars(mysql_real_escape_string($_POST['title']));
       $grouping = htmlspecialchars(mysql_real_escape_string($_POST['grouping']));
       $target_path = mysql_real_escape_string($target_path);
   
       $sql = "INSERT INTO samples SET grouping='$grouping', location='$target_path', title='$title', filename='$filename'";
   
       if (mysql_query($sql))
       {
           echo '<br><div id="successful"><span>Your sample has been entered into the database.</span></div><br>';
       }
   
       else
       {
           echo '<br><div id="failed">Error adding submitted posting: ' . mysql_error() . '</div><br>';
       }
   }
   
   
   This method is fairly rudimentary and has its own drawbacks, but it's been solid so far, and it works well with the other modules. As you can see, the database carries the following fields: a title, a group designation, its location (target path), the actual name of the file and the ID of the entry.
   
   
3. Now that you've got your file uploaded to the server and the database accepting information, you have to be able to manage it, not just on your site, but also in your admin area. Let's start with the admin area. I decided to do this with a table format. What you're looking at is a table that is automatically generated through PHP, and it produces (in order) a thumbnail picture of the graphic, the title information, the grouping information, the category (which doesn't concern you), a text area that one can use to highlight and copy the location of the file relative to the root directory of the server, and, obviously, a delete link. The code looks like this:
   
   
   <!-- Instantiate the table, give it the proper column headers -->
   <table border="1" style="border-width:0px;">
       <tr>
       <th style="width:160px;text-align:center;border-width:0px;">Image</th>
       <th style="width:160px;text-align:center;border-width:0px;">Title</th>
       <th style="width:160px;text-align:center;border-width:0px;">Category</th>
       <th style="width:160px;text-align:center;border-width:0px;">Link</th>
       <th style="width:160px;text-align:center;border-width:0px;">Delete?</th>
       </tr>
   
   <?
   // In each process of the loop, create a row from the
   // information pulled from the database.
       while ($row = mysql_fetch_array($result))
       {
           $title = $row['title'];
           $grouping = $row['grouping'];
           $category = $row['category'];
           $target_path = $row['location'];
           $filename = $row['filename'];
           $ID = $row['ID'];
   
           $esctarget_path = addslashes($target_path);
   
   // This is where Smart Image Resizer starts to come in.
   // You're going to use it to create a linked image that
   // produces the Lightbox 2 effect as the link
   // with the thumbnail created by SIR serving the preview
   // image on the page.
   // The link should be built like this (SIR will do the rest):
   / <a href="path/to/target.jpg" rel="lightbox[group_name]" title="LB2caption" /><img src="/php/image.php/target.jpg?width=151&height=151&cropratio=1:1&#8465;=/target.jpg" /></a>/
   
   // Creating a table row-by-row.
           echo '<tr><td><a href="' . $target_path . '" rel="lightbox[' . $grouping . ']" title="' . $title . '" /><img src="/php/image.php/' . $filename . '?width=151&height=151&cropratio=1:1&#8465;=/' . $target_path . '" /></a><br /></td>';
           echo '<td>' . $title . '</td>';
           echo '<td>' . $grouping . '</td>';
           echo '<td>' . $category . '</td>';
           echo '<td><input type="text" value="' . $target_path . '"></td>';
           echo '<td><a href="javascript:imageDeleteConfirm('' . $esctarget_path . '',' . $ID . ')" class="bodyLink">Delete</a></td></tr>';
       }
   ?>
   
   </table>
   
   
   Every image is listed so that we may delete or access any image we need to.

The Final Show
So now that we have the ability to upload pictures, see all of the images we've uploaded, and delete them when necessary, we're ready to figure out how to make them so that they list into the site's album page. I created the this file (with a .php end, not .rtf) to be included wherever I have image samples I want to list.

For this portion, I run each image in the database through two loops. The first loop runs through each item row in the database. The second loop checks each item's group designation with the groups that have already been processed. If there has already been a link produced with the group in question, the item doesn't get its own image thumbnail. If there isn't any other items with a group, or if the item doesn't have a designated group, then the item gets its own thumbnail.

What this ends up producing is a catalog of thumbnail images, and if an image has other images that I've associated with it in the database (through the 'group' mechanic), those images will show up as additional pages in the Lightbox 2 module that pops up, but won't show themselves in the initial album. In this way, I have a 'pages within pages' architecture that well-suits the examples I have in my portfolio.

If you have any questions about how all of this works, or any suggestions about my advice here, please contact me.