How to update an HTML image gallery (PHP tutorial)

In this tutorial I’ll walk you through the steps involved in building a databaseless PHP admin section for Smooth Gallery. When done, without much effort you should be able to adapt the code to fit any similar JavaScript image gallery(/slider/switcher/swapper… whatever). So let’s take a look at it:

• the manager (demo)
• the gallery you’re managing

As mentioned on the manager page, the password is “demo” and you don’t have sweat about removing/adding/reordering images—the manager in the demo resets the file to an initial input each time a user logs in. For faster testing: right click some photo from the internet, select copy image location and paste it in the Add New Item/Image location field (that’s the only required field). Then press Add. Then in the Edit Items part copy and paste image locations from one item to another and then update it.

You will want to download the gallery + manager before continuing. After you do, open up manager.php and follow along. Only the more important parts ware discussed below, the rest is commented in the file.

So how come no databases?

It’s an image gallery, it’s not gonna have thousands of entries. There’s not much justification in creating a database for 5-20 items. We’ll keep it all in the HTML. And this will give us a chance to work with a really neat tool: PHP Simple HTML DOM Parser. This HTML parser written in PHP5+ is going to save us a lot of work. And I think this won’t be the last you hear of it here on Vile Works.

1. The logic behind it, in plain English

We’re going to have a simple log in/log out functionality, we don’t want anyone who knows the manager’s URI to be able edit our gallery. After the log in, two main options will be available: add new item and edit existing items. …And a log out link.

if logged in
	if received 'add item'
		add the item;
	display 'add item' form;
	if received 'update items'
		update all the items;
	display 'update items' form;
	display 'log out' link;
else
	display 'log in' form;

The conditioned actions “if received ‘add item’ -> add the item” and “if received ‘update items’ -> update the items” are placed in the code before their forms so that they will display a success or error message in the page just above the form that was submitted. The “add new item” functionality will add a new item at the beginning of the gallery: the image along with its title, description and a link to another page. The “update items” will allow us to:

• change the items’ titles, descriptions, images and the URL the images link to
• delete items
• and to reorder the items

2. What’s the manager managing

Let’s take a look at the HTML code of a regular SmoothGallery. [embed_snipt:uUhg2] And this is a kind of a common way for JavaScript image galleries to store their data in the HTML although some might have small differences like using <li>;’s instead of <div>’s for the item nodes (which I believe is a more semantic way). Note: The default Smooth Gallery also had a carousel displaying thumbnails of images. To keep things more general (and not just Smooth Gallery specific), the thumbnails will not be handled by the manager—they were also removed from the HTML—and the carousel was turned off in jd.gallery.js:

showCarousel: false,

However, after getting an idea about how the whole thing works, through a small process of intuition the specific functionality could be easily added.

3. Using the Simple HTML DOOM Parser to add a new element

The “add new item” action will just add a new HTML node at the beginning of the gallery with the inputted details it received from the form. [embed_snipt:uUhj4] The above snippet is just the part responsible for the “add new item” action. And this is where the HTML parser first comes in.

$temp_item->find('img',0)->src

Those of you familiar with the jQuery JavaScript library might have noticed the find() method. This searches for all descendant elements that match the specified expression (CSS selector). In the code above, the second argument for the find() method is the element’s index—in our case 0, because we always need the first (and only) match. After getting to an element, you can easily manipulate its attributes (src, href etc) and its inner and outer text. The image below illustrates the difference between the innertext and outertext.

Outer text is the element including its opening and closing tags and the inner text is just what’s “inside” of it, between the opening and closing tags. What follows in the code is the HTML for the form which sends the data to the snippet discussed above. [embed_snipt:uUia0]

4. Using the Simple HTML DOOM Parser to update the existing elements

And by “update” I mean edit, delete or reorder. [embed_snipt:uUib1]

4.1 Updating and deleting

In the first loop we’re going through the items and if an item was deleted, the outer text is set to null and its position is stored in the $deleted_positions array (we’ll need these positions when we sort them). If the item wasn’t deleted, all its information will be updated.

4.2 Sorting the items with Bubble sort

The do…while loop in the snipped above uses the Bubble sort method to sort the items by positions. As mentioned in the comment, besides the actual item swap we also need to do an swap for the positions, since these aren’t connected to the items—they’re just stored in the $positions array. Followed by the form with all the options for each image. This is where the updates are sent from to the snippet above. [embed_snipt:uUic1] Nifty fact: Because of the way we’re using the positions, we’re able to enter any rational number as a position. So if you wanted to put the last image on the 2nd position, you’d just have give it a position of 1.5 (or anything between 1 and 2), instead of giving it 2 and changing the position for the second to 3 and for the 3rd to 4 and so on. And after pressing submit, the order is achieved and the positions are nice natural numbers again. Because we just want two items per row we’re checking if the position is an even (if ($position%2 == 0)) and if it is we’re adding some class for the CSS to handle and an horizontal ruler.

Conclusions

So this pretty much covers the PHP part. I commented as much as I could of the code but still, feel free to shoot any questions in the comments. Of course, the view needed some CSS stylying for a decent display. The Blueprint CSS framework was used for faster and cleaner development. And some more JavaScript (mootools to be more precise) improvements made their way in, achieving tasks like:

• select all text when clicking in a text field
• instantly change the displayed image when the text in the image location is changed
  • and this means the Reset button now has to reset back all the images and not just the fields

[embed_snipt:uUid4] So that’s about it. Hope the effort invested was worth it and the result was of help to you. For those of you interested, there’s a tutorial on Nettuts with a similar goal using PHP and mySQL:

For this lesson, our goal is to create a photo admin section where an administrator can retrieve photos from a database and update the title of his photos simply by clicking on the appropriate text.