Gimp part 2

From LXF Wiki

(Difference between revisions)
Revision as of 17:27, 27 Sep 2008
Guy (Talk | contribs)
← Go to previous diff
Current revision
M-Saunders (Talk | contribs)
Reverted edit of Egecakibi, changed back to last version by Guy

Current revision

Gallery design using Gimp, PHP and CSS


The gallery created here will work fine under the Firefox browser, but may not work as expected in other browsers. Fine tuning the CSS for cross-browser support is a big topic. There are many good texts on the subject such as those by Eric Meyer, whose More on Eric Meyer on CSS offered the basic premise for this project.
The complete code and a working version of this two-part tutorial is available online at the author's web site

In last month's tutorial we started in on a project to build an online, dynamic gallery. We began by laying out a set of seven design requirements for the project, which were as follows:

  1. We must be able to handle any number of images in a single directory.
  2. The images must be sorted alphabetically by filename when displayed.
  3. We must handle landscape (wide), portrait (tall) or square images, and no thumbnail should be taller or wider than 100 pixels.
  4. Each thumbnail must reference a page with a full size original of the image.
  5. We must provide a 3 x 3 Layout.
  6. The interface must provide a 'film slide' presentation, with image names listed on each slide frame.
  7. For interactivity, we want hover images ­ when the mouse pointer is over the image ­ in colour, while default images are displayed in greyscale.

We built a Gimp Perl script that processed a directory of images and produced a series of greyscale and colour thumbnail images. This script enabled us to meet requirements 1 and 7 of our design. Now it's time to add online interaction to our project.

Gimp1-62.png (

1/ The layout is a simple block format­ a 3x3 sheet with titles printed with each slide.

This month we'll address the other five requirements by developing a PHP script, an HTML template and a CSS style sheet. Along the way we'll make one more trip into Gimp to add a little style to our layout.