Gimp part 2

From LXF Wiki

Revision as of 23:48, 17 Nov 2010; view current revision
←Older revision | Newer revision→

>== Gallery design using Gimp, PHP and CSS ==

<div style="float:right;padding:10px;"> <div style="background:white;width:400px;border:1px solid black;padding:10px;">TUNING FOR BROWSERS<br> 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.<br> The complete code and a working version of this two-part tutorial is available online at the author's web site<br> </div></div>

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

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.

<div style="float:right;padding:10px;"> <div style="background:white;width:270px;border:0px solid black;padding:10px;">Gimp1-62.png ( 1/ The layout is a simple block format­ a 3x3 sheet with titles printed with each slide. </div></div>

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.