By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,846 Members | 1,646 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,846 IT Pros & Developers. It's quick & easy.

How to use Irfanview freeware to create web thumbnail galleries

P: n/a
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
Aug 10 '06 #1
Share this Question
Share on Google+
8 Replies


P: n/a

barb a écrit :

Thanks, i hijack this thread a little to refresh memory :

Can someone remember a small tool witch produce a
basic html page with thumbnails on the left vertical
aligned ?

it has a guy too

laurent

Aug 10 '06 #2

P: n/a

lisztfr a écrit :
barb a écrit :

Thanks, i hijack this thread a little to refresh memory :

Can someone remember a small tool witch produce a
basic html page with thumbnails on the left vertical
aligned ?

it has a guy too

laurent

Found :

HTML Imager v1.0 - Copyright © 1996 Eric G.V. Fookes
================================================== ==

HTML Imager produces web pages showing all GIF
and/or JPG pictures from the directory you select.
Each picture is shown together with its file name
(alphabetical order) and size. You can also
select different background colors or patterns
to test the appearence of each image under
the chosen conditions.

HTML Imager makes it easy to catalog large
collections of web design pictures or to
produce online photo albums.

This program is Freeware. You can find updates and
other programs by visiting the following web site:

http://www.unige.ch/sciences/terre/geologie/fookes/

You can also contact the author by E-mail at the
following address:

fo****@sc2a.unige.ch

Snail mail:
Eric G.V. Fookes
av. Eugène-Pittard 22Ter
CH - 1206 Geneva
Switzerland

Hope you enjoy using it!

============================

laurent

Aug 10 '06 #3

P: n/a

lisztfr wrote:
Can someone remember a small tool witch produce a
basic html page with thumbnails on the left vertical
aligned ?
perhaps you mean iMapper. it does client side maps but can make
thumbnail strips too.

it was shareware from www.Star-tek.com.au in 98 or so. do not know
where to get it now.

Aug 10 '06 #4

P: n/a
barb wrote:
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).
Since it has been aptly proven that if you deviate from the exact
steps below, you may not get suitable results,
Au contraire...
_____________________
1. Shrink the original proofs to create the smaller web images
<snip>
Press "File" "Start batch dialog with selected thumbs".
A "Batch conversion" form will pop up.
The pix only need to be resized if someone *wants* to make the files
smaller.
___________________
3. Now it's time to create your thumbnails.
There is no need to do this as a separate step, Irfanview can/will
make them when making the HTML file.
--

dadiOH
____________________________

dadiOH's dandies v3.06...
....a help file of info about MP3s, recording from
LP/cassette and tips & tricks on this and that.
Get it at http://mysite.verizon.net/xico

Aug 10 '06 #5

P: n/a
It really seems much easier than that...

0. Irfanview will automatically create and fill the directories specified
in 4.

1. If you want thumbnails, you can simply start from the desktop icon
"Irvanview Thumbnails".

2. Yes, you do need to previously size your main images for web viewing.
But you probably dont want 25%. You probably want to specify a final size
suitable for web viewing, probably no larger than 800x600 pixels (assuming
target is a 1024x768 pixel video screen). DPI value doesnt matter on the
video screen, it can be blank.

3. Unnecessary, Irfanview will create the thumbnail files automatically
(it already has the thumbnail images from step 1, and step 4 tells it
where to put them).

4. This is what does the work.

I'd say:

1. Create a folder of web size images to be displayed.
2. Irfanview Thumbnails - and select them.
3. menu File - Save Selected thumbs as HTML
4. There you have it.

--
Wayne
http://www.scantips.com "A few scanning tips"

Aug 10 '06 #6

P: n/a
barb wrote:
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
What are "original thumbnails"? Are you making thumbnails of the thumbnails?
Aug 10 '06 #7

P: n/a
ms
"lisztfr" <la*************@libertysurf.frwrote in
news:11*********************@p79g2000cwp.googlegro ups.com:
>
Found :

HTML Imager v1.0 - Copyright © 1996 Eric G.V. Fookes
================================================== =
HTML Imager produces web pages showing all GIF
and/or JPG pictures from the directory you select.
Each picture is shown together with its file name
(alphabetical order) and size. You can also
select different background colors or patterns
to test the appearence of each image under
the chosen conditions.

HTML Imager makes it easy to catalog large
collections of web design pictures or to
produce online photo albums.

This program is Freeware. You can find updates and
other programs by visiting the following web site:

http://www.unige.ch/sciences/terre/geologie/fookes/
file not found, not in Google search either ????

Mike Sa
Aug 10 '06 #8

P: n/a

"barb" <bw****@cox.netwrote in message
news:1s******************************@40tude.net.. .
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).
That's a lot of work.

If you run WindoZe, then there's two much faster and easier ways.

get Micro$oft's Power Tool called Resize.
right-click on any number of pictures
do 'custom'
press go

DONE

I also do thousands at a time using a command-line program. Type one simple
statement. DONE!

Aug 10 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.