Example

HTML Thumbnail Photo Directory Maker

Author: Carl Sassenrath
This example requires REBOL/View
Return to REBOL Cookbook

After returning from visiting some friends I wanted to share my digital camera photos on a web page. To make it easy to browse the photos, I needed to create an index page of thumbnail photos. So, I wrote this little REBOL script to generate them automatically.

Put this script in the directory above your photos. Then change the DIR to the name of your photo directory. The script will create a "thumbs" subdirectory to store the thumbnail photos needed for the HTML page, and the script will also generate an HTML img-index file to use for browsing them.

As the thumbnails are being generated, you'll see them displayed in a little window on your screen. (And, if you want, you can add the progress bar from the previous cookbook example. I'll leave that to you.)

Here's the script:


    REBOL [Title: "HTML Thumbnail Photo Generator"]

    dir: %photos/

    make-dir/deep dir/thumbs ; where to keep the thumb photos

    html: "<HTML><BODY>"
    emit: func [data] [repend html data] ; (cookbook example 0006)

    view/new layout [
        i1: image 80x60 effect [aspect]
        t1: text 80 bold
        button 80 "Quit" [quit]
    ]

    emit [
        <H2> "Photo Index for " dir </H2> newline
        <B> "Generated " now/date </B><P>
        <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2">
    ]

    n: 0
    foreach file load dir [
        ; Process image files only:
        if find [%.jpg %.png %.gif %.bmp] suffix? file [
            ; Load the image and show its icon:
            file: lowercase file
            photo: load dir/:file
            i1/image: photo
            t1/text: file
            show [i1 t1]
            wait 0 ; check Quit button

            ; Create a name for the icon file:
            icon: copy file
            clear find/reverse tail icon "."
            append icon ".png"

            ; Save the icon image:
            save/png dir/thumbs/:icon to-image i1

            ; Add table cell links (and row break if needed):
            if zero? n // 8 [emit <TR ALIGN="CENTER">]
            emit [
                <TD>
                {<A HREF="} file {">}
                {<IMG SRC="thumbs/} icon {">}
                <BR><FONT SIZE="2"> file </FONT></A>
                </TD> newline
            ]
            n: n + 1
            new-row: zero? n // 8
            if new-row [emit </TR>]
        ]
    ]
    if not new-row [emit </TR>]
    emit [</TABLE></BODY></HTML>]
    write dir/img-index.html html

    browse dir/img-index.html

If you don't want to see the page, you can remove that last line (browse).

If you want the program to prompt you for a directory name, add this code to the top of the script:


    dir: ask "Directory? "
    if empty? trim dir [quit]
    dir: dirize to-file dir
    if not exists? dir [quit]

In this code ASK gets the directory name from the user, the TO-FILE converts the string to a file datatype, and the DIRIZE adds a slash (/) to the end of it (to indicate that it is a directory not just a file).


2006 REBOL Technologies REBOL.com REBOL.net