So that the world at large benefits from our efforts, here is one fully
documented way to use Windows Irfanview freeware to create thumbnail web
galleries (http://www.irfanview.com).
STEP 1: Start with original thumbnails & two empty sub directories
STEP 2: Create smaller versions of the originals for one sub directory
STEP 3: Create thumbnail version of the originals the other sub directory
STEP 4: Create an index.html pointing to the smaller images & thumbnails
STEP 5: Copy the entire hierarchy over to your web server
Since it has been aptly proven that if you deviate from the exact steps
below, you may not get suitable results, I documented the exact steps one
used for me to obtain successful results in the hopes this writeup saves
others the days of effort it cost me by not knowing the hints & tricks
below!
0. Start with a directory of large photographs, e.g.:
c:\pic\proofs (for your larger originals)
containing a series of original photographs, e.g.:
c:\pic\proofs\Picture 001.jpg
c:\pic\proofs\Picture 002.jpg
c:\pic\proofs\Picture 003.jpg
Create two empty sub directories:
mkdir c:\pic\images (for your smaller web page images)
mkdir c:\pic\thumbs (for your tiny web page thumnails)
1. Shrink the original proofs to create the smaller web images
by starting Windows Irfanview (version 3.98) and then
select "File" & then "Thumbnails".
This opens a second window containing a left pane
(file browser) and a right pane (image browser).
You can kill the original Irfanview window at this time.
2. Now it's time to shrink the large images into something smaller.
Using the left thumbnail window browser pane, browse to your
proofs directory (c:\pic\proofs) and select all the proofs
by pressing "Options" and "Select All".
Press "File" "Start batch dialog with selected thumbs".
A "Batch conversion" form will pop up.
Select the following settings:
Input Files: C:\pic\proofs\Picture 001.jpg
C:\pic\proofs\Picture 002.jpg
C:\pic\proofs\Picture 003.jpg
Output directory: c:\pic\images
Work as: (x)Batch conversion
Press the "Options" button to set the JPEG Quality to about 50%.
[x]Use advanced options
Press the "Set advanced options" button.
In the "Settings for all images form" that pops up, set:
[x]RESIZE
(x)Set new size as percentage of original
Width: 25% Height: 25%
[x]Preserve aspect ratio (proportional)
[x]Use Resample function (better quality)
[x]Don't enlarge smaller images
Set DPI value: 72
Press the OK button in the "Settings for all images" form.
Press the "Start" button in the "Batch conversion" form.
You should see the progress dialog:
Converting image: C:\pic\proofs\Picture 003.jpg
... Ok - C:\pic\images\Picture 003.jpg
Converting image: C:\pic\proofs\Picture 002.jpg
... Ok - C:\pic\images\Picture 002.jpg
Converting image: C:\pic\proofs\Picture 001.jpg
... Ok - C:\pic\images\Picture 001.jpg
Errors: 0, Warnings: 0
Notice you now have populated the images directory:
C:\pic\images\Picture 001.jpg
C:\pic\images\Picture 002.jpg
C:\pic\images\Picture 003.jpg
3. Now it's time to create your thumbnails.
In the thumbnail window, press "Options" and then press
"Set thumbnail options". Change the settings as desired.
Using the left thumbnail window browser pane, again browse to
your proofs directory (c:\pic\proofs) and select all the proofs
by pressing "Options" and "Select All".
Press "File" "Save selected thumbs as single images".
A navigation box will pop up that will NOT allow you to create
a directory (so it must exist already). In that navigation box,
browse to your c:\pic\thumbs directory and press OK.
No conversion dialog will pop up, but, soon you'll have the thumbs:
C:\pic\thumbs\Picture 001_t.jpg
C:\pic\thumbs\Picture 002_t.jpg
C:\pic\thumbs\Picture 003_t.jpg
4. Now it's time to create your index.html file.
Using the left thumbnail window browser pane, again browse to
your proofs directory (c:\pic\proofs) and select all the proofs
by pressing "Options" and "Select All".
Press "File" "Save selected thumbs as HTML file"
This should pop up the "Create HTML file" form.
These settings are CRITICAL (if you don't follow exactly, you
may not get the correct HTML file) so be careful here:
Main result HTML file name: index.html
Destination folder: c:\pic <--- use a full path here
Thumbnails sub-folder: thumbs <--- use a relative path here
Thumbnail file prefix:
Thumbnail flie suffix: _t
Images sub-folder: images <-- use a relative path here
Folder with HTML templates: c:\programs\viewers\irfanview\html\
[x]Copy original images to destination folder (recommended)
[ ]Create one HTML file for each thumbnail (HTML browsing)
[ ]Create HTML Slideshow
HTML Options Page title: My Pictures
Columns: 4
[ ]Link images to original files on local disk ("file://")
[x]Write file info/text [$F = file name] [$S = file size]
Text alignment ( )Left (x)Center ( )Right
Link/Image display ( )Display links in original browser window
(x)Display links in the second browser window
When you are ready, press the [Export] button.
This creates the index.html file at:
c:\pic\index.html
At this point, you may close the Irfanview thumbnails window.
5. Your file system should look like the following at this time:
PROOFS: C:\pic\proofs\Picture 001.jpg
C:\pic\proofs\Picture 002.jpg
C:\pic\proofs\Picture 003.jpg
IMAGES:
C:\pic\images\Picture 001.jpg
C:\pic\images\Picture 002.jpg
C:\pic\images\Picture 003.jpg
THUMBS:
C:\pic\thumbs\Picture 001_t.jpg
C:\pic\thumbs\Picture 002_t.jpg
C:\pic\thumbs\Picture 003_t.jpg
INDEX.HTML
C:\pic\index.html
The key portion of the index.html file is:
<TD ALIGN=CENTER VALIGN=BOTTOM>
<FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2">
<A HREF="./images/Picture 003.jpg"
target="" style="text-decoration:none">
<IMG SRC="./thumbs/Picture 003_t.jpg"
width="80" height="80" BORDER="0" ALT="Picture 003.jpg">
<div style="text-align: center">Picture 003.jpg
<BR>2.49 MB</div></A></FONT></TD>
Namely:
<A HREF="./images/Picture 003.jpg">
<IMG SRC="./thumbs/Picture 003_t.jpg">
</A>
6. Test out your new thumbnail gallery TGP web page by
double-clicking on the index.html file.
This will bring up your default browser with the thumbnails
showing. When you click on the thumbnails, the smaller copies
of the originals will show up for the user in their browser.
7. At this point, you can copy the entire c:\pic directory over
to your favorite web server location so that others may
enjoy your newly created thumbnail photo gallery using
Irfanview freeware.
All in all, it's an easy task:
Start with original thumbnails
Create smaller versions of the originals
Create thumbnail version of the originals
Create an index.html page pointing to the smaller images
Copy the entire directory over to your web server.
I hope this writeup helps many others,
barb
