Easy Peasy Image Gallery

Ever had a collection of photos from your holidays or parties that you wanted to make available on the web for your friends and relatives to enjoy? With Easy Peasy Image Gallery (EPIG), you can do just that. All that you need is web space to host your EPIG album with PHP & GD support. Simply upload the EPIG files on the same folder where your photos are and you are done!

EPIG displays an image gallery with automatically generated thumbnails for all the image files (supports JPEG, GIF and PNG files) on the current folder. You can then click on the thumbnails to see the actual images and you can navigate page-by-page or by page numbers.

Features

EPIG 2 has been re-designed for scratch and it contains a lot of new feaures, mainly based on the feedback received from previous versions:

  • Automatically generated thumbnails
  • Page-by-page navigation
  • Page number navigation
  • Three presentation styles
  • Custom thumbnail dimensions
  • Custom preview Image dimensions
  • Custom image quality
  • Ability to display a description and/or filename for each image
  • Sort your gallery by filename or date in either ascending or descending order
  • Custom number of thumbnail rows & columns in each page
  • NO Database is required. Only a webserver with PHP and GD installed
  • Page template for easy integration with the rest of your web site

Download

EPIG is provided as a compressed zip file. You can use any program that can uncompress zip files (like IZArc or StuffIt) to extract the files.

Download EPIG 2

Requirements

EPIG requires PHP4 with GD support. It does not require MYSQL or any other database to be present.

Customization

EPIG has been designed to work without any modification. However, it is very simple to customize it. All the customization can be done through the config file.

You can customize the dimensions of the generated thumbnails and/or their quality (applies only to JPG images). If you want to customize it further, you can modify the supplied template or create your own, based on the instructions provided below.

You can display the filename of the image below its thumbnail and/or display an image description as a caption. Finally, you can sort your album by filename or date in ascending or descending order.

EPIG can display your album in three different ways using presentation styles.

  • Classic style: Displays pages of image thumbnails. When a thumbnail is selected and the image on its original size is displayed on a new window.
  • Preview style: Displays pages of image thumbnails that allow the user to click on a thumbnail and a preview is displayed on the same page (no need for the pop-up page anymore). The dimensions and quality of the preview are configurable through config.xml.
  • Kes style: Once the user clicks on a thumbnail, the selected image is displayed on its own page with navigation to the next and previous image. A button back to the thumbnails is also provided.

Update Instructions

If you are updating an older version of EPIG then you need to upload and overwrite all the EPIG php files to your photo album on the web server.
Note that if you update and overwrite config.xml and/or template.html you will lose your existing settings.

Installation

EPIG comprises of the following files:

  • The php files comprise the EPIG kernel. You simply need to upload all the php files to your web server. No modification is required on any of the PHP files.
  • config.xml is the configuration file. Edit this XML file with a text editor (like notepad or textedit) to personalise your EPIG album. Save your changes and upload config.xml file on the same location where the EPIG kernel & your images reside.
  • template.html is the default template. You can simply upload the file as provided or you can edit it first according to the instructions provided below. You can always point to a different template by amending the value for the tag in the configuration file.

After you have dealt with the EPIG files as described above, upload all your photos in the same location as the EPIG files.

Custom Template Instructions

You can create your own templates by creating an html file and applying the EPIG markers on it. Do not forget to change the value for the tag in config.xml if the filename is other than “template.html”.
The EPIG markers are:

  • {gallery} : Your thumbnails
  • {preview}: The preview image used in Preview & Kes styles
  • {next} : The link to the next page
  • {back} : The link to the back page
  • {pages} : A list with all your pages as links
  • {title} : The title of your album (optional)
  • {description} : A description for your album (optional)
  • {author} : Your Name (optional)

EPIG warps the images around a CSS class “thumbnail”. This class allows you to redefine the margins and padding of the thumbnails, or provide a custom-made border. If caption is used then you can specify a CSS class “caption” to tweak the captions.

Developer’s Notes

EPIG 2 follows the Model-View-Controller (MVC) paradigm. The MVC is a software design pattern that assists in logically separating the code, make it more reusable, maintainable, and generally better. The MVC was first described by the author group Gang of Four. Dean Helman wrote (an extract from Objective Toolkit Pro white paper):

“The MVC paradigm is a way of breaking an application, or even just a piece of an application’s interface, into three parts: the model, the view, and the controller. MVC was originally developed to map the traditional input, processing, output roles into the GUI realm.

Input -> Processing -> Output

Controller -> Model -> View

The user input, the modeling of the external world, and the visual feedback to the user are separated and handled by model, view port and controller objects. The controller interprets mouse and keyboard inputs from the user and maps these user actions into commands that are sent to the model and/or view port to effect the appropriate change. The model manages one or more data elements,responds to queries about its state, and responds to instructions to change state. The view port manages a rectangular area of the display and is responsible for presenting data to the user through a combination of graphics and text.”

In EPIG 2, Gallery.php represents the Model class. It loads the images of the current directory and it contains the necessary functions that handle the image manipulation. Epig.php is the Controller class. This class is the core of the application. It interprets the URL requests and controls the View and Model classes. Finally, template.php is the View class. It produces all the HTML needed to display the image gallery. common.php is a collection of a general-purpose functions that can be called statically from any of the other classes.

You can develop your own styles by extending either the template.php or any of the supplied styles. My suggestion would be to study the code of the provided styles before you embark on your style.

Feedback & Suggestions

I welcome your feedback and suggestions on EPIG. My goal was to develop an image gallery which would be easy to setup and maintain.

Submit a Problem or Feature Request

If you have either spotted a problem with it or have an idea for a new feature, then please submit it to the issue tracker.