Gimp part 2

From LXF Wiki

(Difference between revisions)
Revision as of 17:27, 27 Sep 2008
Guy (Talk | contribs)
categories
← Go to previous diff
Revision as of 23:48, 17 Nov 2010
Egecakibi (Talk | contribs)

Go to next diff →
Line 1: Line 1:
-== Gallery design using Gimp, PHP and CSS ==+>== Gallery design using Gimp, PHP and CSS ==
-<div style="float:right;padding:10px;">+&lt;div style=&quot;float:right;padding:10px;&quot;&gt;
-<div style="background:white;width:400px;border:1px solid black;padding:10px;">TUNING FOR BROWSERS<br>+&lt;div style=&quot;background:white;width:400px;border:1px solid black;padding:10px;&quot;&gt;TUNING FOR BROWSERS&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 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 complete code and a working version of this two-part tutorial is available online at the author's web site<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;
www.ximba.org/articles/lf/63 www.ximba.org/articles/lf/63
-</div></div>+&lt;/div&gt;&lt;/div&gt;
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:
-<ol>+&lt;ol&gt;
-<li>We must be able to handle any number of images in a single directory.</li>+&lt;li&gt;We must be able to handle any number of images in a single directory.&lt;/li&gt;
-<li>The images must be sorted alphabetically by filename when displayed.</li>+&lt;li&gt;The images must be sorted alphabetically by filename when displayed.&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;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>Each thumbnail must reference a page with a full size original of the image.</li>+&lt;li&gt;Each thumbnail must reference a page with a full size original of the image.&lt;/li&gt;
-<li>We must provide a 3 x 3 Layout.</li>+&lt;li&gt;We must provide a 3 x 3 Layout.&lt;/li&gt;
-<li>The interface must provide a 'film slide' presentation, with image names listed on each slide frame.</li>+&lt;li&gt;The interface must provide a 'film slide' presentation, with image names listed on each slide frame.&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;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;
-</ol>+&lt;/ol&gt;
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.
-<div style="float:right;padding:10px;">+&lt;div style=&quot;float:right;padding:10px;&quot;&gt;
-<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]+&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]
'''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.'''
-</div></div>+&lt;/div&gt;&lt;/div&gt;
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>

Revision as of 23:48, 17 Nov 2010

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



UNDER COSTRUCTION, PLEASE SEE THIS POST IN RESERVE COPY (http://eruvipokyke.co.cc)


CLICK HERE (http://eruvipokyke.co.cc)