What freeware creates thumbnail photo html gallery WITH LINKS

Discussion in 'Photoshop' started by barb, Aug 5, 2006.

  1. barb

    barb Guest

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

  2. barb

    BoilerBill Guest

    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
    <html>
    <head>

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

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

    <p align="center"><b><font size="7" face="Lucida Calligraphy"
    color="#FF0000">
    A Mersey Ferry</font></b></p>
    <p align="center">
    <img border="0" src="daf+iris1-1-04web-04.JPG" width="640"
    height="480"></p>

    <p align="center">
    <font size="5" color="#FF00FF">The Royal Iris and Royal Daffodil (ex
    Mountwood
    and Overchurch)</font><br>

    <font size="5" color="#FF00FF">Having a day off, new year's day
    2004</font></p>

    <p align="left"><b><font size="6"
    color="#FF0000">Introduction:</font></b></p>

    <p align="left"><b><font size="4">(OK a bit long but worth the
    read)</font></b></p>

    <p align="justify"><font size="4"><b><font color="#000000">Right off,
    this is NOT
    the official web site of the Mersey Ferries.</font> They have their
    own
    excellent site at:<br> <a href="http://www.merseyferries.co.uk/">
    http://www.merseyferries.co.uk/</a></b></font></p>

    <p align="justify"><font size="4"><b>There are also several other
    sites concerned
    with this service, many with excellent photographs and detailed
    histories.</b></font></p>

    <p align="justify"><font size="4"><b>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.</b></font></p>

    <p align="justify"><font size="4"><b>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).</b></font></p>

    <p align="justify"><font size="4"><b>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).</b></font></p>

    <p align="justify"><font size="4"><b>Boarding I asked a crew man if
    the Engineer
    was available. He happily pointed him out to me in the Passenger
    area.</b></font></p>

    <p align="justify"><font size="4"><b>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.</b></font></p>

    <p align="justify"><font size="4"><b>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.</b></font></p>

    <p align="justify"><font size="4"><b>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.</b></font></p>

    <p align="justify"><font size="4"><b>So this site has turned out to be
    dedicated to
    my appreciation of the <font color="#FF0000">MANAGEMENT </font>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.</b></font></p>

    <p align="justify"><font size="4"><b>Equally my appreciation of the
    <font color="#FF0000">STAFF </font>there, who are working together to
    maintain
    it and to keep the very high standards seen on the
    boats.</b></font></p>

    <p align="justify"><font size="4"><b>My thanks to you all, along with,
    no doubt,
    that of the millions you have served so well over the
    years.</b></font></p>

    <p align="justify"><font size="4" color="#CC0000"><b>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.</b></font></p>

    <p align="justify"><font size="4"><b>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.</b></font></p>

    <p align="left"><font size="6" color="#FF0000"><b>The
    Galleries:</b></font></p>

    <p align="left"><font size="4"><b>(as always the pictures are the
    clickable
    links)</b></font></p>
    <p align="left"><u><font size="7" color="#FF0000"><b><i>
    <a href="pier%20head%20disaster/pierheadindex.htm">RUSH INCERT - THE
    SUNKEN
    LANDING STAGE AT <br>LIVERPOOL PIER HEAD - CLICK
    HERE</a></i></b></font></u></p>

    <table border="0" cellpadding="2" style="border-collapse: collapse"
    bordercolor="#111111" width="100%" id="AutoNumber1">
    <tr>
    <td width="25%">
    <p align="center"><font color="#FF0000" size="5"><i>The Queen of
    the River </i></font></td>
    <td width="25%">
    <p align="center"><font color="#FF0000" size="6">The Royal
    Iris</font></td>
    <td width="25%">
    <p align="center">
    <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%">
    <p align="center"><font size="5" color="#FF0000">Disposed, Banished,
    Decaying<br>but never forgotten</font></td>
    </tr>
    <tr>
    <td width="25%">
    <p align="center"><font color="#FF0000" size="6">Out on the
    River</font></td>
    <td width="25%">
    <p align="center">
    <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%">
    <p align="center"><font color="#FF0000" size="6">The
    Terminals</font></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%">
    <p align="center"><font size="6" color="#FF0000">&nbsp;Royal
    Daffodil</font></p>
    <p align="center"><font size="5" color="#FF0000">ex
    <i>Overchurch</i></font></td>
    <td width="25%">
    <p align="center">
    <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%">
    <p align="center"><font color="#FF0000" size="6">Royal
    Iris<br></font><font color="#FF0000" size="5"><i>of the
    Mersey</font></p>
    <p align="center"><font size="5" color="#FF0000">ex
    Mountwood</font></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%">
    <p align="center"><font size="6"
    color="#FF0000">&nbsp;Snowdrop</font></p> <p align="center"><font
    size="5" color="#FF0000">ex
    <i>Woodchurch</i></td>
    </td>
    <td width="25%">
    <p align="center">
    <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%">
    <p align="center"><font size="6" color="#FF0000">Woodside and
    River at Night</font></p>
    <p align="center"><font size="5" color="#FF0000">(in for the hell
    of it)</font></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><br><hr>

    <p align="justify"><b><font size="4">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.</font></b></p>
    <p align="justify"><font size="4"><b>So the boats are fully sea worthy
    craft,
    well able to venture forth into Winter North Atlantic
    conditions.</b></font><BR>
    </p>
    <br><BR>
    <p align="center"><font size="4"><img
    src=http://www.personal.u-net.com/cgi-bin/count?countername=ferry></font></p>
    <HR><BR>
    <p align="justify"><font size="6">As always the case in Boilerbill
    websites, copyright of all images is
    strictly reserved.<BR>
    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. <BR>
    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.</font><B><font size="6">
    </font></b></P>
    <p align="justify"><font size="6">Contact details below:</font></P>
    <p align="justify"><B><font size="6">
    Commercial use by others is available by arrangement with the
    webmaster, ie ME!!<BR><BR>

    Contact is welcome from all </font> <A
    HREF=mailto:>
    <font size="6">
    <font color="#00FF00">Keith J. (Boiler
    Bill) Chesworth</font></P></font><font size="7">
    </CENTER><BR><BR>

    </body>

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

  3. barb

    Mike Russell Guest

    I recommend JAlbum - it's free. It creates the web pages and you then use
    FTP to upload them.
    http://jalbum.net/
     
    Mike Russell, Aug 5, 2006
    #3
  4. barb

    barb Guest

    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: <I made this blank>
    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
    #4
  5. barb

    barb Guest

    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
     
    barb, Aug 6, 2006
    #5
  6. barb

    Harry Limey Guest

    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
     
    Harry Limey, Aug 6, 2006
    #6
  7. barb

    barb Guest

    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
     
    barb, Aug 6, 2006
    #7
  8. 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
     
    Chris F.A. Johnson, Aug 7, 2006
    #8
  9. barb

    barb Guest

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

    barb Guest

    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>
    <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

    ps Maybe I'll post this separately in a new thread so newbies can find it
    more easily.
     
    barb, Aug 10, 2006
    #10
    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.