What freeware creates thumbnail photo html gallery WITH LINKS

barb · Aug 5, 2006

What WinXP freeware do you use to create local HTML galleries (with easily
clickable web links to the larger local photographs)?

This Windows photo-gallery freeware needs to do only two basic tasks:
- Given a directory of large originals - create smaller thumbnails
- Create a local index.html linking the thumbnails to the larger originals

Here's what failed!

IRFANVIEW:
Googling, I find some advocated Irfanview. But, while Irfanview is a great
fast photo viewer and while Irfanview easily creates thumbnails, I couldn't
figure out how to force Irfanview to output a simple index.html of those
thumbnails which points to the larger originals. http://www.irfanview.com

JALBUM:
Some suggested JAlbum in older threads, but that also failed me (YMMV).
Apparently JAlbum requires Sun Java on WinXP. Unfortunately, the entire
hellish Sun Java installation killed my system (the whole thing was a royal
mess); so I had to delete the whole assemblage (wasting hours in that
process). Obviously JAlbum isn't a recommended (by me anyway) alternative
solution ever again. http://jalbum.net

YoPoW:
Newer googled threads suggested "Your Photos on the Web" as the best
Windows photograph JPG web index.html generator. YoPoW has a nice & simple
wizard so I had a local web page in minutes and, best of all, YoPoW gave
you the third option of having a third set of photos linked to the
thumbnails.
a) Your huge originals
b) Your 100 pixel thumbnails (settable to any desired size)
c) And, an additional 800 pixel medium size
I liked YoPoW, but, oh my gosh, was the index.html it created miserably
difficult to navigate. It drove me crazy that the user interface of YoPoW
was so absolutely easy to use but the resulting web page was torture for
the user to navigate. http://home.hccnet.nl/s.j.francke/yopow/yopow.htm

Given that this simple failed quest has now consumed a half day, I'd like
to ask the following two questions of experts smarter than I am.

QUESTION 1:
Can Irfanview create HTML linking thumbnails to originals? If so, how?

QUESTION 2:
If not, what Windows freeware program does these three simple tasks:
0. Given a directory of large originals ...
1. It generates a directory of local thumbnails ...
2. And then creates a reasonably easy to navigate local index.html ...
3. Which points to the larger originals (or a medium sized copy).

Thank you in advance for your advice,
barb

BoilerBill · Aug 5, 2006

What WinXP freeware do you use to create local HTML galleries (with easily
clickable web links to the larger local photographs)?
Click to expand...

Easiest is what "HTML for Dummies" advised us to do, say 12years
back..

Copy source from someone else's' site in notepad and update to your
requirements

Here is the source from one of mine,
The headers I now let Frontpage set up, easier by far, then wade in
with the text editor, same as using notepad

Cut and paste from here into notepad and save as an html, then you can see the layout and adjust in your browser<
Click to expand...

<html>
<head>

<title>index</title>
<bgsound src="BOATHO~1.WAV" loop="2">
</head>

<body text="#000000" background="sea.jpg">


A Mersey Ferry

<img border="0" src="daf+iris1-1-04web-04.JPG" width="640"
height="480">


The Royal Iris and Royal Daffodil (ex
Mountwood
and Overchurch) 

Having a day off, new year's day
2004

Introduction:

(OK a bit long but worth the
read)

Right off,
this is NOT
the official web site of the Mersey Ferries. They have their
own
excellent site at: <a href="http://www.merseyferries.co.uk/">
http://www.merseyferries.co.uk/</a>

There are also several other
sites concerned
with this service, many with excellent photographs and detailed
histories.

This site started off as a bit of
a 'return to
roots' thing for me. I grew up in Birkenhead and had my first tastes
of Marine
Engineering on the twin triple expansion steam boats which preceded
these boats
on the old Birkenhead Ferry. Boats such as the Upton and Claughton.
They started
my love of steam engines and Marine Engineering. I must have been
pre-teen then
as I was about 12 when the first of the (still to me) new motor boats
was
brought into service, but was always made welcome in the Engine Rooms
and taught
the basics of the systems.

When these motor boats came I was
made equally
welcome 'down the pit' and started my my love affair with medium and
low speed
Diesels there. An affair which eventually took me to sea on Tankers
and then
through various career changes to end up now as a Boiler Surveyor
(which was the
least interesting bit as a boy - ho hum).

When I visited the first of these
boats on my
journey back in time, I took the round trip as a fare paying passenger
on the mv
Royal Daffodil (or Overchurch as she still is to me).

Boarding I asked a crew man if
the Engineer
was available. He happily pointed him out to me in the Passenger
area.

Talking with the Engineer and
later the deck
staff and a Manager at the quay side in the Birkenhead Docks, I found
that the
same spirit of happy co-operation and quiet pride in the service
existed today
as all those years back.

Where-ever I went I was welcomed
and, in a
way, encouraged to take the pictures and produce this site. Without
any
pre-arrangement or official introduction.

After seeing the the way that so
many
organisations, both commercial and enthusiast, produce a service and
then studiously
avoid as far as possible contact with the customers, compounding this
by not
considering that
provision should be made for those customers needs or wants further
than when a
profit may be turned, the whole experience on the Ferries was a breath
of fresh
air. The only place I have experienced like it was at the Royal Albert
Hall, in
London, where I went as a Contractor, carrying out surveys and not a
member of
the general public.

So this site has turned out to be
dedicated to
my appreciation of the MANAGEMENT of the
Ferries
who have obviously got it right in the recruitment of the staff and
the
management of them, to maintain the happy esprit de corps I found
there.

Equally my appreciation of the
STAFF there, who are working together to
maintain
it and to keep the very high standards seen on the
boats.

My thanks to you all, along with,
no doubt,
that of the millions you have served so well over the
years.

Could I please
encourage any
who are planning a trip to the North West of England to make time to
do a trip on these
boats. For once I can not find fault anywhere. It is a wonderful
experience,
without considering the history behind it.

The Fare seems expensive to those
of us who
remember the 3d and 6d (old pence) fares, but as an extended river
trip between
the Liverpool and Seacombe legs is included off peak, maybe even on
peak now?
then it becomes very economically viable.

The
Galleries:

(as always the pictures are the
clickable
links)

<a href="pier%20head%20disaster/pierheadindex.htm">RUSH INCERT - THE
SUNKEN
LANDING STAGE AT LIVERPOOL PIER HEAD - CLICK
HERE</a>

<table border="0" cellpadding="2" style="border-collapse: collapse"
bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="25%">
The Queen of
the River </td>
<td width="25%">
The Royal
Iris</td>
<td width="25%">

<a href="real%20royal%20iris/realroyalirisindex.htm">
<img border="0"
src="real%20royal%20iris/tnRoyal%20Iris%2028-2-06-16.JPG" width="220"
height="164"></a></td>
<td width="25%">
Disposed, Banished,
Decaying but never forgotten</td>
</tr>
<tr>
<td width="25%">
Out on the
River</td>
<td width="25%">

<a href="river/riverindex.htm">
<img border="0" src="river/tnrivermersey-16-9-03-34.JPG"
width="220" height="165"></a></td>
<td width="25%">
The
Terminals</td>
<td width="25%">
<a href="woodsideterminal/terminalindex.htm">
<img border="0"
src="woodsideterminal/tnmerseyferry-16-9-03-0000001.JPG" width="220"
height="165"></a></td>
</tr>
<tr>
<td width="25%">
 Royal
Daffodil
ex
Overchurch</td>
<td width="25%">

<a href="royal%20daffodil/daffodilindex.htm">
<img border="0"
src="royal%20daffodil/tnroyaldaffodilweb-16-9-03-041.JPG" width="220"
height="165"></a></td>
<td width="25%">
Royal
Iris of the
Mersey
ex
Mountwood</td>
<td width="25%">
<a href="royal%20iris/irisindex.htm">
<img border="0"
src="royal%20iris/tnroyal%20irisweb-10-9-03-24.JPG" width="220"
height="165"></a></td>
</tr>
<tr>
<td width="25%">
 Snowdrop ex
Woodchurch</td>
</td>
<td width="25%">

<a href="woodchurch/woodchurchindex.htm">
<img border="0" src="woodchurch/tnwoodchurchweb-19-9-03-20.JPG"
width="220" height="165"></a></td>
<td width="25%">
Woodside and
River at Night
(in for the hell
of it)</td>
<td width="25%">
<a href="woodsideferryatnight/nightindex.htm">
<img border="0"
src="woodsideferryatnight/tnwoodsideferryatnightweb-16-9-03-0000002.JPG"
width="220" height="165"></a></td>
</tr>

</table> <hr>

As can be seen these boats are
not little
lightweight jobs. The River Mersey flows north/south at its estuary so
receives
the worst of the weather funnelled down it. From the narrow estuary,
going up
stream, it broadens out into a wide sweeping salt marsh. These are
know as the
Helsby and Frodsham Marshes, before becoming a more regular sort of
river. The
result is that the narrows at the estuary cause an artificially high
tide and
strong currents there. This has the advantage of keeping the estuary
channels
fairly silt free, but means that the boats have to have the power to
run against
these tides.
So the boats are fully sea worthy
craft,
well able to venture forth into Winter North Atlantic
conditions. 

 
<img
src=http://www.personal.u-net.com/cgi-bin/count?countername=ferry>
<HR> 
As always the case in Boilerbill
websites, copyright of all images is
strictly reserved. 
However, images are freely offered for personal collection,
educational or other
non-profit making uses, subject to being attributed. Larger sizes than
that on
the sites are usually available on request. 
In this case the management, employees and members of the Friends of
the Mersey
Ferries are free to use the images, should they so wish for publicity
and fund
raising efforts on behalf of the ferries.

Contact details below:

Commercial use by others is available by arrangement with the
webmaster, ie ME!! 

Contact is welcome from all <A
HREF=mailto:>

Keith J. (Boiler
Bill) Chesworth
</CENTER> 

</body>

that is the finish of the page<
Click to expand...

Play with it and enjoy

In actual fact it is the first of a multiple indexed site. The
thumbnail pictures lead on to secondary indexes which then give the
main pictures

This is a live site of mine, so you can see what it does:
www.amerseyferry.co.uk
However, since it is a redirected site, the only coding you could see
on line is for the frame of the outfit I use to obtain my web addys.

Keith J (BoilerBill) Chesworth
www.unseenlondon.co.uk
www.blackpooltram.co.uk
www.happysnapper.com
www.boilerbill.com - main site
www.amerseyferry.co.uk

Mike Russell · Aug 5, 2006

I recommend JAlbum - it's free. It creates the web pages and you then use
FTP to upload them.
http://jalbum.net/

barb · Aug 6, 2006

Thumbnail window
Select thumbnails
File
Save selected thumbs as HTML file
Link images to original files on local disc
Click to expand...

IrfanView (unfortunately) failed to create the desired web page.

Can someone tell me what settings to use in IrfanView thumbnail view
such that the saved HTML file actually shows the thumbnails?

Here's EXACTLY what I did so you can reproduce it exactly to
help me and others (yes I read the Irfanview help but there is
more "help" here in this one thread than in the thumbnail section
in IrfanView 3.98).

0. I started with an empty directory:
mkdir c:\pic
And then I put a folder of 500 original photographs there.
c:\pic\original

Each original JPEG is approximately 3008 x 2000 pixels.
No other files or directories existed in c:\pic at this time.

1. I double-clicked on the first photo, which brought up Irfanview
Irfanview version 3.98

2. In Irfanview, I selected "File" and then "Thumbnails".
This opened a second window with 500 thumbnails showing.

3. In the thumbnail view, I selected "Options" & then "Select All".
This selected all 500 thumbnails.

4. I pressed "File" & then "Save selected thumbs as HTML file".
The options chosen were:
Main result HTML file name: index.html
Destination folder: c:\pic
Thumbnails sub-folder: c:\pic\thumbs
Thumbnail file prefix: th_
Thumbnail flie suffix: _th
Images sub-folder: c:\pic\images
Filder with HTML templates: c:\programs\viewers\irfanview\html\
[x]Copy original images to destination folder (recommended)
[x]Create one HTML file for each thumbnail (HTML browsing)
HTML Options Page title: My Pictures
Columns: 12
[x]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
[Export]

5. There was no confirmation that the job finished, but, soon enough
there were 501 HTML files in my c:\pic directory:
c:\pic\index.html
c:\pic\Picture 001.html
c:\pic\Picture 002.html
...
c:\pic\Picture 500.html

6. Unfortunately, when I double-clicked on the index.html, the
web page contained blank thumbs (i.e., there were no thumbnails).
Hmmmmmm.... At least the links worked but they were to the originals
which are basically too large to view fully in a single web page.

7. Looking at the index.html page, I see that it was my folly to assume
the c:\pic\thumbs directory was going to be created and populated by
Irfanview automatically. OK. Fair enough. This is the HTML:
<A HREF="Picture 001.html" target="" style="text-decoration:none">
<IMG SRC="./c:/pic/thumbs/th_Picture 001_th.jpg"
width="80" height="80" BORDER="0" ALT="Picture 001.jpg">
So it looks like I'll have to create my own thumbs first

8. In Irfanview Thumbnails, I pressed "Options" & then "Select All".
Then I pressed "File" & then "Save selected thumbs as single images".

9. Unfortunately, the dialog that popped up didn't give the option
to create the directory (just the files), so I quit out of Irfanview
and manually created the directory to put the thumbnails into:
c:\pic\thumbs

10. I repeated step 8 but was dismayed to find that Irfanview didn't
give me a dialog with options to rename the thumbs. So I had to look
to see what name they were given and what size they were created at.

11. The thumbnails seem to have been created with specifications of:
c:\pic\thumbs\Picture 001_t.jpg (80 x 80 pixels)
c:\pic\thumbs\Picture 002_t.jpg (80 x 80 pixels)
...
c:\pic\thumbs\Picture 500_t.jpg (80 x 80 pixels)

12. Going back to step 4, I modified the thumbnail-name setting:
Thumbnail file prefix: 
Thumbnail flie suffix: _t

13. At this point, after deleting all the HTML files that were creatd,
I repeated step 4 above and step 5 & 6 unfortunately came up with
the same result. There were no thumbs visible in the resulting
index.html web page when viewed in Firefox.

14. Again hand editing the index.html, I saw the error was in Irfanview
putting the full path in the image-source HTML tag so I changed it
FROM:
<A HREF="Picture 001.html"><IMG SRC="./c:/pic/thumbs/Picture 001_t.jpg"
TO:
<A HREF="Picture 001.html"><IMG SRC="./thumbs/Picture 001_t.jpg"

15. This minor edit to make the paths relative solved that problem;
but nobody wants to be editing HTML text files when they don't have to.

16. So, I went back to IrvanView and, after deleting all the HTML files
that were created, I again repeated step 4 changing:
FROM:
[x]Link images to original files on local disk ("file://")
TO:
[ ]Link images to original files on local disk ("file://")
But, this failed to solve the problem of blank thumbnail images
in the index.html due to a path of "./c:/pic/thumbs/".

17. So, I went back to IrfanView and, after deleting the HTML files,
I again looked at the options in step 4. I noticed there was no
"c:\pic\images" directory, so I changed the setting in step 4:
FROM:
Images sub-folder: c:\pic\images
TO:
Images sub-folder: c:\pic\original

18. But, this didn't solve the problem of blank thumbnail images.
The resulting c:\pic\index.html web page still pointed to an
IMG SRC of: "./c:/pic/thumbs/Picture 001_t.jpg".

19. Getting desperate, I looked at the settings in step 4 again when
I noticed no images were copied to the destination folder despite
the recommended setting in Irfanview (what does that setting do)?

So, I changed that setting in step 4:
FROM
[x]Copy original images to destination folder (recommended)
TO:
[ ]Copy original images to destination folder (recommended)

20. Alas. The result was no better than before. No thumbnails showed up
in the resulting web page due to the incorrect link being added to
the IMG SRC HTML directive.

Can someone tell me what settings to use in IrfanView thumbnail view
such that the saved HTML file actually shows the thumbnails?

Thanks in advance,
barb

barb · Aug 6, 2006

Irfanview will sure enough do this.
Here's an example:
http://paulmueller.home.mindspring.com/forweb3/index.html
Click to expand...

Hi Paul Mueller,

My problem with the otherwise venerable IrfanView at the moment hinges
on the image source HTML tag being incorrectly written to the
index.html file by IrfanView 3.98 as:
<IMG SRC="./c:/pic/thumbs/Picture 001_t.JPG">

When I do a "View" and then "Source" on your suggested web page:
http://paulmueller.home.mindspring.com/forweb3/index.html
I see your image source HTML tag is using a relative link:
<IMG SRC="P1010021a_t.jpg">

What magical setting are we supposed to use in IrfanView to get
IrfanView to NOT write out "./c:/P1010021a_t.jpg" as the
image source path but to write out "P1010021a_t.jpg" instead?

Thanks in advance,
barb

Harry Limey · Aug 6, 2006

barb said:

What magical setting are we supposed to use in IrfanView to get
IrfanView to NOT write out "./c:/P1010021a_t.jpg" as the
image source path but to write out "P1010021a_t.jpg" instead?

Thanks in advance,
barb
Click to expand...

Hi Barb

Never used Irfanview for this myself! (Use it for most other batch type
things though) so I set about doing what you asked with a folder of about 50
images (included some .psd files in there by mistake)
Now what I did (never having tried before, you understand!!) is having
selected the images I wanted to use (If I were doing this for real - I would
batch process them all to the right size for display first - say 800 px
wide?) and having created and selected a new output folder, I left all the
settings at default and pressed 'GO'
No problem at all - 50+ html pages - clicked on the Thumbnails.html and the
ten or so I tried all worked - the thumbnails all showed too, although the
html pages with .psd files just showed a placeholder, not surprisingly!

So I suggest leaving things on their default settings!! unless that is now
too late!! If so I don't mind sending you the defaults I used?

Harry

barb · Aug 6, 2006

xnview: http://perso.orange.fr/pierre.g/xnview/enfeatures.html
Click to expand...

Voila! XnView worked like a charm!
http://perso.orange.fr/pierre.g/xnview/enfeatures.html

Having failed (as explained in great detail) to create a web page with
thumbnails linked to the original JPEGs using the freeware IrfanView, the
suspected spyware FreshView, the hard-to-install javaware JAlbum, and the
hard-to-navigate YoPoW, I just now tried your suggested XnView.

Here's what I did.
0. I already had all my originals in c:\pic\original
I deleted everything else so that there were no other files or
directories in c:\pic other than the directory of 500 originals.
1. I started up XnView version 1.82.4 & viewed the following defaults:
"View" "Layout" = (left frame thumbnails, right frame originals)
"View" "Thumbnail Size" = 92 x 69 pixels
2. In the "Browser" tab, I clicked on c:\pic\original
3. I pressed "Edit" and then "Select All" to select all 500 images
4. I pressed "Create" and then "Web Page"
5. This brought up the "Web page Create" dialog box
6. I entered the following information into that dialog box:
Template folder: c:\programs\webprogs\XnView\Web Template\
Template: _Default - Frame
Title: My Web Page
Header: My Header
Number of Columns: 12
Sort by: Name [ ]Reverse
Thumbnail Width: 100 Height: 100
Format: (x)GIF ( )JPEG [x]Interlaced
[x]Use original files if smaller than thumbnail size
Information displayed: [x]Show information, <Filename> (lots of options)
Picture: [ ]No HTML page per picture, [ ]Size maximum (not specified)
Output Directory: c:\pic\web
Original sub-folder: original
Thumbnail sub-folder: thumb
Thumbnail prefix: t_
[x]Copy source images to output folder
[x]Launch web browser when done
[Create]
7. Unlike IrfanView, this create brought up a progress box
detailing the progress as 500 images were thumbnailed and the
web page ostensibly created.
8. Surprisingly, a dual-pane framed browser window showed up in
Firefox, with the 500 thumbnails in the left frame and the
desired photo in the right pane (depending on which thumbnail
was clicked on at any given time).
9. Looking around, I see the c:\pic directory now had two sub folders:
c:\pic\original
c:\pic\web
Inside the "web" subfolder were two new sub-sub folders:
c:\pic\web\original
c:\pic\web\thumb
A copy of the 500 original JPEGs with 500 new web pages were found at:
c:\pic\original\Picture 001.jpg
c:\pic\original\Picture 001.html
And, 500 tiny GIF thumbnails were created by XnView at:
c:\pic\thumb\t_Picture 001.gif
The main index.html file was only a dozen lines long:
c:\pic\web\index.html
Containing the following line:
<frame src="thumb.html">
Which basically pointed to the second HTML file:
c:\pic\web\thumb.html
Which contained the calls to the thumbs and copies of the originals:
<a href="original/Picture%20001.html" target="frame2">
<img src="thumb/t_Picture%20001.gif"
alt="Picture 001.jpg" width="100" height="66"></a>
<div>Picture 001</div>
10. The key point is that XnView, unlike the otherwise venerable IrfanView,
created an IMG SRC image-source tag which contained a relative path
to the desired thumbnails.
11. The only task left was to manually shrink the 500 originals four fold
from 3008 x 2000 pixels to 752 x 500 pixels so that the desired image
fit on a single monitor viewing.
12. So in the "Browser" tab, I clicked on c:\pic\web\original, and,
I pressed "Edit" and then "Select All" to select all 500 copies of
the originals.
13. I then pressed "Tools" & then "Batch Convert" and I then selected the
"Transformations" tab and then I selected "Resize" and then I pressed
the "Add >" button which brought up a bunch of resize options:
Width: 25%
Height: 25%
[x]Keep ratio
Resample: Bilnear
[x]Switch Width and Height to follow orientation
[x]Decrease only
[Go]
14. Unfortunately, I received an error because XnView tried to convert
the HTML files in addition to the JPEG files (huh? why?):
WARNING: Format of the file could not be determined:
c:\pic\web\original\Picture 001.html
15. So I moved all the HTML files in that folder to a temorary directory:
c:\pic\web\original\tmp\Picture 001.html
c:\pic\web\original\tmp\Picture 002.html
...
c:\pic\web\original\tmp\Picture 500.html
16. Unfortunately, when I ran step 13 again, five hundred dialog boxes
came up in series asking me:
The file c:\pic\web\original\Picture 001.jpg already exists!
Do you want to overwrite it?
17. So I went back to the "Batch Convert" dialog from step 13, and
in the "General" tab I changed the option:
FROM:
Overwrite = Ask
TO:
Overwrite = Replace [x]Keep original date/time attributes
18. Unfortunately, this change caused the Batch Convert settings to
forget what we did previously so I repeated step 13, again setting
the size to be one quarter of the original size.
19. I then moved the 500 HTML files in the tmp sub folder back to
the original folder so that for each 25% picture was an HTML file:
c:\pic\web\original\Picture 001.jpg
c:\pic\web\original\Picture 001.html
20. Finally, when I double-clicked on the index.html file:
c:\pic\web\index.html
the thumbnails were all in the left frame and whichever thumbnail
was selected showed the 25% shrunken original in the right pane.

Thank you very much for teaching me how to create thumbnail web pages!
I'm sad that we couldn't get the otherwise venerable IrfanView to create
links to the relative location of the thumbnails; but XxView seems to do
the job quite well so there's no need to fix IrfanView at this point.

Thank you all very much for your help and advice,
barb

Chris F.A. Johnson · Aug 7, 2006

Voila! XnView worked like a charm!
http://perso.orange.fr/pierre.g/xnview/enfeatures.html

Having failed (as explained in great detail) to create a web page with
thumbnails linked to the original JPEGs using the freeware IrfanView, the
suspected spyware FreshView, the hard-to-install javaware JAlbum, and the
hard-to-navigate YoPoW, I just now tried your suggested XnView.

Here's what I did.
Click to expand...

After reading the torturous procedure necessary to create a
thumbnail page with GUI tools, I thought I'd see how hard it would
be to do something similar with a shell script.

The script turned out to be a little over 30 lines. It's not a
production quality program, yet, but it allows me to create pages
with a simple command:

mkthumbindex *jpg *.png *.gif

A sample result is at:
<http://cfaj.freeshell.org/web/examples/cbronline.jpg.shtml>

The pages are presented with this stylesheet:
<http://cfaj.freeshell.org/web/examples/img.css>.

The script requires the ImageMagick commands identify and convert,
and can be seen at

0. I already had all my originals in c:\pic\original
I deleted everything else so that there were no other files or
directories in c:\pic other than the directory of 500 originals.
1. I started up XnView version 1.82.4 & viewed the following defaults:
"View" "Layout" = (left frame thumbnails, right frame originals)
"View" "Thumbnail Size" = 92 x 69 pixels [snip]
20. Finally, when I double-clicked on the index.html file:
c:\pic\web\index.html
the thumbnails were all in the left frame and whichever thumbnail
was selected showed the 25% shrunken original in the right pane.
Click to expand...

barb · Aug 7, 2006

ImageWalker. http://www.imagewalker.com
Click to expand...

So that others benefit from the rollup, it looks like the following dozen
are the suggested programs for those frugalers among us who create web
pages of our photographs using Windows freeware.

THE TOP THREE SUGGESTED WINDOWS WEB ALBUM FREEWARE CREATORS:
irfanview http://www.irfanview.com/
xnview: http://perso.orange.fr/pierre.g/xnview/enfeatures.html
jalbum http://jalbum.net/

OTHER SUGGESTED WINDOWS WEB ALBUM CREATOR FREEWARES:
porta http://www.stegmann.dk/mikkel/porta/
iwebalbum http://www.eunq.com/index.html
yopow http://home.hccnet.nl/s.j.francke/yopow/yopow.htm
ethumbs http://personal.inet.fi/business/toniarts/ethumbe.htm
imagewalker. http://www.imagewalker.com
imcat http://www.nulidex.com/products/image_catalog.shtml
thumbawumba http://www.snapfiles.com/get/thumba.html
powertoys
http://www.microsoft.com/windowsxp/downloads/powertoys/xppowertoys.mspx
freshview http://www.freshdevices.com/freshview.html

A SCRIPT TO DO THE JOB KINDLY SUBMITTED BY CHRIS JOHNSON:
Sample http://cfaj.freeshell.org/web/examples/cbronline.jpg.shtml
Stylesheet http://cfaj.freeshell.org/web/examples/img.css
Script http://cfaj.freeshell.org/web/examples/mkthumbindex.txt

I hope this recap summarizes for future users so they don't go through what
I went through just to create a web page with thumbnails.

barb

barb · Aug 10, 2006

So that the world at large benefits from our efforts, here is one fully
documented way to use Irfanview to create thumbnail web galleries.

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>

<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
 2.49 MB</div></A></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

ps Maybe I'll post this separately in a new thread so newbies can find it
more easily.

What freeware creates thumbnail photo html gallery WITH LINKS

barb Guest

Advertisements

BoilerBill Guest

Advertisements

Mike Russell Guest

barb Guest

barb Guest

Harry Limey Guest

barb Guest

Chris F.A. Johnson Guest

barb Guest

barb Guest

Advertisements

Want to reply to this thread or ask your own question?

Need some opinions (This time with links!)

What Creates Noise/Grain At Higher ISO Speeds?

Effect Question: What plugin creates the posterized effect described below

thumbnail without gallery

Links and Suggestions with good photo retouch references?

Adobe PS-CS2 - Web Photo Gallery question about thumbnail quality...

Who links a web photo but hides rest of gallery?

freeware HTML photo gallery app?

What freeware creates thumbnail photo html gallery WITH LINKS

barb Guest

Advertisements

BoilerBill Guest

Advertisements

Mike Russell Guest

barb Guest

barb Guest

Harry Limey Guest

barb Guest

Chris F.A. Johnson Guest

barb Guest

barb Guest

Advertisements

Want to reply to this thread or ask your own question?

Useful Searches