How to use Irfanview freeware to create web thumbnail galleries

Discussion in 'Digital Photography' started by barb, Aug 10, 2006.

  1. barb

    barb Guest

    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
     
    barb, Aug 10, 2006
    #1
    1. Advertisements

  2. barb

    lisztfr Guest

    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
     
    lisztfr, Aug 10, 2006
    #2
    1. Advertisements

  3. barb

    lisztfr Guest

    lisztfr a écrit :

    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:



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

    Hope you enjoy using it!

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

    laurent
     
    lisztfr, Aug 10, 2006
    #3
  4. barb

    F. D. Lewis Guest

    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.
     
    F. D. Lewis, Aug 10, 2006
    #4
  5. barb

    dadiOH Guest

    Au contraire...
    _____________________
    The pix only need to be resized if someone *wants* to make the files
    smaller.
    ___________________
    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
     
    dadiOH, Aug 10, 2006
    #5
  6. barb

    Wayne Guest

    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, Aug 10, 2006
    #6
  7. What are "original thumbnails"? Are you making thumbnails of the thumbnails?
     
    Harlan Messinger, Aug 10, 2006
    #7
  8. barb

    ms Guest

    file not found, not in Google search either ????

    Mike Sa
     
    ms, Aug 10, 2006
    #8
  9. barb

    John Guest

    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!
     
    John, Aug 10, 2006
    #9
  10. barb

    Paul J Gans Guest

    There is resizing and there is resizing. Methods vary in
    their results. Some simply resize by dropping every other
    pixel (or some suitable ratio of dropped to kept pixels).
    Other method actually resample, examining surrounding
    pixels to decide what value to give to the new pixel.

    And then there is the compression ratio in turning out
    a jpg. Variations there not only make a difference in
    file size but in what can actually be seen in the photo.

    I fully understand the need to do batch jobs here. But
    I'd experiment with different programs and different
    settings to find out what works for YOU.

    My own particular choice is Irfanview since I can start
    with psd's from PhotoShop. It offers a choice of size
    reduction methos. I use Lanczos resampling. And I choose
    the jpg compression number depending on what works best
    for that batch -- and even then I sometimes have to go
    back to the original and recompress several of them.

    ---- Paul J. Gans
     
    Paul J Gans, Aug 11, 2006
    #10
  11. barb

    John Guest

    You are a power-user, Paul.
    You might be interested in this:
    http://www-128.ibm.com/developerworks/library/l-graf/?ca=dnt-428

    I use similar command line tools in scheduled batches. It works out rather
    well for much of the automated donkey work.
     
    John, Aug 11, 2006
    #11
  12. barb

    jdeland1 Guest

    I use similar command line tools in scheduled batches. It works out rather
    -
    I'm interested in batch processing using IrfanView, specifically sample
    commands that new users can cut their teeth on, all the way up to the
    wowee power-user level. Any other tips/tricks re: IrfanView would be
    appreciated.

    My real name is Jack DeLand, and I'm redoing the Help file for Irfan.
    I've been active in the Help subcult for about 15 years. If you'd care
    to e-mail rather than post, that's fine with me. Lots of good material
    to be gathered here! And of course full attribution with a link if you
    wish.
     
    jdeland1, Aug 11, 2006
    #12
  13. Barb,

    I used IrfanView like that, see http://www.michna.com/photos/ .

    But it's actually much simpler. IrfanView does almost all of it
    automatically.

    Hans-Georg
     
    Hans-Georg Michna, Aug 12, 2006
    #13
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.