What freeware creates thumbnail photo html gallery WITH LINKS

Aug 5, 2006

On Sat, 05 Aug 2006 17:58:08 GMT, barb wrote:

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

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<

<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-00000 02.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=ferr y> <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>

</html>

that is the finish of the page<

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

On Sat, 05 Aug 2006 17:58:08 GMT, barb wrote:

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

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

Mike Russell
www.curvemeister.com/forum/

barb

Aug 6, 2006

On Sat, 05 Aug 2006 19:15:20 GMT, dadiOH wrote:

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

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

On Sat, 05 Aug 2006 22:55:52 GMT, Paul wrote:

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

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

Tony Blair

Aug 6, 2006

"barb" wrote in message

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

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

On 5 Aug 2006 13:39:01 -0700, Carputers wrote:

0. Given a directory of large originals …
1. What 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).
xnview: http://perso.orange.fr/pierre.g/xnview/enfeatures.html

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

cfajohnson

Aug 7, 2006

On 2006-08-06, barb wrote:

On 5 Aug 2006 13:39:01 -0700, Carputers wrote:

0. Given a directory of large originals …
1. What 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).
xnview: http://perso.orange.fr/pierre.g/xnview/enfeatures.html

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.

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
<http://cfaj.freeshell.org/web/examples/mkthumbindex.txt>.

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.

—
Chris F.A. Johnson <http://cfaj.freeshell.org> ============================================================ ======= Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

barb

Aug 7, 2006

On Sun, 06 Aug 2006 10:10:29 GMT, Voivod wrote:

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

ImageWalker. http://www.imagewalker.com

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/xppow ertoys.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

Must-have mockup pack for every graphic designer 🔥🔥🔥

Master Retouching Hair

Related Discussion Topics

batch create thumbnails of webpages (HTML)

How do I create this HTML link?

How do you create this effect?? (pic’s link inside) HELP!!!

Web Photo Gallery: Can’t create and upload more than one?

Photoshop deletes the security text while creating a web-gallery

how to create this thumbnail effect?

How to create these thumbnails

Web Gallery thumbnail frames accumulate when nav button used to parent page

Creating HTML image displays

How to I create a new Web Photo Gallery in PE3 ?

SWF into photo gallery page, but thumb links stopped

thumbnail without gallery

creating browser thumbnails in background

Question – creation of linked Adjustment Layer easily in PS CS

HELP!!! CAN’T CREATE WEB PHOTO GALLERY