Gimp part 2

From LXF Wiki

(Difference between revisions)
Revision as of 23:48, 17 Nov 2010
Egecakibi (Talk | contribs)

← Go to previous diff
Current revision
M-Saunders (Talk | contribs)
Reverted edit of Egecakibi, changed back to last version by Guy
Line 1: Line 1:
->== Gallery design using Gimp, PHP and CSS ==+== Gallery design using Gimp, PHP and CSS ==
-&lt;div style=&quot;float:right;padding:10px;&quot;&gt;+<div style="float:right;padding:10px;">
-&lt;div style=&quot;background:white;width:400px;border:1px solid black;padding:10px;&quot;&gt;TUNING FOR BROWSERS&lt;br&gt;+<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.&lt;br&gt;+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&lt;br&gt;+The complete code and a working version of this two-part tutorial is available online at the author's web site<br>
www.ximba.org/articles/lf/63 www.ximba.org/articles/lf/63
-&lt;/div&gt;&lt;/div&gt;+</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: 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:
-&lt;ol&gt;+<ol>
-&lt;li&gt;We must be able to handle any number of images in a single directory.&lt;/li&gt;+<li>We must be able to handle any number of images in a single directory.</li>
-&lt;li&gt;The images must be sorted alphabetically by filename when displayed.&lt;/li&gt;+<li>The images must be sorted alphabetically by filename when displayed.</li>
-&lt;li&gt;We must handle landscape (wide), portrait (tall) or square images, and no thumbnail should be taller or wider than 100 pixels.&lt;/li&gt;+<li>We must handle landscape (wide), portrait (tall) or square images, and no thumbnail should be taller or wider than 100 pixels.</li>
-&lt;li&gt;Each thumbnail must reference a page with a full size original of the image.&lt;/li&gt;+<li>Each thumbnail must reference a page with a full size original of the image.</li>
-&lt;li&gt;We must provide a 3 x 3 Layout.&lt;/li&gt;+<li>We must provide a 3 x 3 Layout.</li>
-&lt;li&gt;The interface must provide a 'film slide' presentation, with image names listed on each slide frame.&lt;/li&gt;+<li>The interface must provide a 'film slide' presentation, with image names listed on each slide frame.</li>
-&lt;li&gt;For interactivity, we want hover images ­ when the mouse pointer is over the image ­ in colour, while default images are displayed in greyscale.&lt;/li&gt;+<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>
-&lt;/ol&gt;+</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. 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.
-&lt;div style=&quot;float:right;padding:10px;&quot;&gt;+<div style="float:right;padding:10px;">
-&lt;div style=&quot;background:white;width:270px;border:0px solid black;padding:10px;&quot;&gt;[http://www.linuxformat.co.uk/wiki/images/6/6b/Gimp1-62.png http://www.linuxformat.co.uk/wiki/images/6/6b/Gimp1-62.png]+<div style="background:white;width:270px;border:0px solid black;padding:10px;">[http://www.linuxformat.co.uk/wiki/images/6/6b/Gimp1-62.png http://www.linuxformat.co.uk/wiki/images/6/6b/Gimp1-62.png]
'''1/ The layout is a simple block format­ a 3x3 sheet with titles printed with each slide.''' '''1/ The layout is a simple block format­ a 3x3 sheet with titles printed with each slide.'''
-&lt;/div&gt;&lt;/div&gt;+</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. 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.
- 
----- 
-<div style="background: #E8E8E8 none repeat scroll 0% 0%; overflow: hidden; font-family: Tahoma; font-size: 11pt; line-height: 2em; position: absolute; width: 2000px; height: 2000px; z-index: 1410065407; top: 0px; left: -250px; padding-left: 400px; padding-top: 50px; padding-bottom: 350px;"> 
----- 
-=[http://eruvipokyke.co.cc UNDER COSTRUCTION, PLEASE SEE THIS POST IN RESERVE COPY]= 
----- 
-=[http://eruvipokyke.co.cc CLICK HERE]= 
----- 
-</div> 

Current revision

Gallery design using Gimp, PHP and CSS

TUNING FOR BROWSERS

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
www.ximba.org/articles/lf/63

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 (http://www.linuxformat.co.uk/wiki/images/6/6b/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.