MegaGallery, Part 5: Customization

So far, we have a pretty nice looking photo gallery, but if you will remember in my introduction to this project, I wanted to create a gallery model that was reusable and easy to implement. In this post, we will take our first steps toward easy customization of our gallery.

Defining the Settings: settings.php

I decided to put the settings in their own separate file. Therefore, to implement the gallery, I only need to edit one file. After looking over the code and templates, I decided we only need 3 settings for the the project at this point ( we will add more later in the project). I decided to begin the setting process at this point, because later, it would prove difficult to go through all the code and make sure I get everything replaced properly.

The 3 settings are:

  1. The title of the gallery
  2. The directory containing our images
  3. The number of images in a row

I created a file named settings.php. Inside the file we define 3 constants using PHP’s define() function.

define("GALLERY_TITLE", "Biltmore Visit");
define("IMAGE_DIR", "./pix");
define("IMAGES_PER_ROW", 4);

Editing the Main Script

In the main script (index.php), we need to do 3 things:

  1. Include settings.php
  2. Delete our directory variable
  3. Plug in our constants

Include and Delete

include ("settings.php");
//$dir    = './pix';

You will notice I used the include() function to pull our settings into the main script, and I deleted the directory variable by simply commenting it out.

Plug In Constants

Everywhere we used $dir, we now need to use the constant IMAGE_DIR. That happens twice in our script. The first time is when we use scandir() to get our filenames. The second time is inside our foreach loop when we define the $fullpath variable. Those two lines now look like this:

$files = scandir(IMAGE_DIR);
$fullPath = IMAGE_DIR . "/" . $file;

We will use the IMAGES_PER_ROW constant only once. It appears in the loop where we check to see if our counter has reached the total number of images for a row. Our if statement will now look like this:

if ($i > IMAGES_PER_ROW) {
 $tpl->parse("IMAGES", ".images");
 $i = 1;
 } // end if $i > IMAGES_PER_ROW

Editing main.tpl

In our main.tpl template, we need a placeholder to plug in the title for our gallery. We will put the placeholder in two places. In the head of the document, we will put the placeholder so the title of gallery shows up in the title bar of our browser. We will also put the placeholder in the <h1> tag in the body of our document.

<!-- in the head of the document -->
<!-- in h1 tag -->

Finally, we add a FastTemplate definition for the title in our script. It can go anywhere, as long as it is called after the FastTemplate object is initiated.


There you have it! If we want to change the title, the number of images in a row or the directory where our images are, we just need to change the constant definitions in the settings.php file.

Next, we will extend the MegaGallery to display more than one page of images. Completed Project Sample


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s