Photo Albums on the Web with JIGL

Description

This page basically describes how to create the pages I use on my websites, for picture albums.  I tried quite a few condenders for this, but eventually settled in on jigle for its simplicity, controlability, and ease of use.

There are a few things to making the JIGL script work in the highly automated fashion here at pluzzi.com. The 6 steps described below are what I used to make work so that the remote users do nothing more than drag and drop pictures from their "my pictures" folder, into a folder on their website. Then wait a period of time, and voila ... pictures on the web.

Note that for the purposes of this entire document, the web share on my server is truly known as "/export/apps/www", but I soft linked it to "/usr/local/apache/htdocs" and will refer to it that way most often - but they are one and the same.

Original jigl information available here.

Process/Implementation

There were six steps to get this going.  A few of these steps are home grown scripts, but they are not too difficult to follow, and all are fairly well documented.

1. First is the main script that does all the work in JIGL. This script is run from cron (more on that in step 4), and takes care of creating the slides, the thumbs, and the nested web pages. This takes one argument as its input, which is the site "name". In my case, I would run this as "create_slides.sh pluzzi". It will then look for a folder named "/usr/local/apache/htdocs/pluzzi", find a folder under that main directory called "pix", and go to town. Sending no input to this script will just cause it to error out and give you the usage info.
   

[root@turbo bin]#  cat create_slides.sh
#!/bin/bash
#
#####
#####  Written by Paul A. Luzzi on 12-27-2003
#####
#####  Purpose is to build a list of slides via cron
#####
#####  Version 1.2  designed to remove spaces from file names
#####  Version 1.3  adds in subdirectory concept
#####  Version 1.3b slight tweak on v1.3
#####  Version 1.3c slight tweak on v1.3b
#####

#####
#####  Confirm argument was passed in.
#####
if [ "$#" -lt "1" ]
  then
    echo "Must pass in a website name."
    echo "Exiting on error."
    exit 1
  fi

#####
#####  Which website to do - must be argument passed in
#####
WEBSITE="$1"

#####
#####  Configure PATH to have all required areas
#####    - no longer needed in Fedora 8 now
#####
# export PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/bin/X11:/etc:/usr/X11R6/bin:/usr/local/bin:/usr/local/sbin:/export/apps/wine:/usr/bin/mh

#####
#####  Start off in the main picture directory
#####
cd /export/apps/www/${WEBSITE}/pix

#####
#####  Get current owner ... for later
#####
OWNER=`ls -ld . | /bin/awk '{print $3}' | /usr/bin/head -1`
GROUP="www"

################################################################
################################################################
################################################################

#####
#####  Enter subdirectory loop here.  Search for any directories
#####    that are not "thumbs", "slides" or "." or ".."
#####
for SUBDIR in `/usr/bin/find . -type d -print | /bin/egrep -v "^.$|slides|thumbs"`
  do
    #####
    #####  Change into each directory and begin inner loop here ...
    #####
    echo "===================================================================="
    echo "\"Entering $SUBDIR now ... \" "
    cd "${SUBDIR}"

    #####
    #####  Build variable for Dirname
    #####
    PRETTY_PRINT=`/bin/pwd | /bin/awk -F/ '{print $NF}' | /bin/sed -e "s/_/ /g"`

    #####
    #####  run the jigl.pl script with the following options :
    #####
    #####    ->  "--link-original"
    #####    ->  "--replace-spaces y"
    #####    ->  "--go-back"
    #####    ->  "--noskb"
    #####    ->  "--nosxy"
    #####    ->  "--index-title "
    #####
    ## /usr/local/bin/jigl.pl --link-original --replace-spaces y --go-back --nosxy --noskb --index-title "$PRETTY_PRINT"
    /usr/local/bin/jigl.pl --link-original --replace-spaces y --go-back --index-title "$PRETTY_PRINT"

    #####
    #####  Go back to master/parent pix directory again
    #####
    cd "/export/apps/www/${WEBSITE}/pix"

    #####
    #####  End loop now
    #####
  done

################################################################
################################################################
################################################################

#####
#####  Change ownership of all newly created files now ....
#####
if [ `pwd` = "/export/apps/www/${WEBSITE}/pix" ]
  then
    /bin/chown -R ${OWNER}:${GROUP} .
   else
    echo "Couldnt change ownership, because I am in `pwd`."
    echo "Wouldnt be right to stamp with ${OWNER}:${GROUP} permissions."
    echo "Exiting thru normal channels."
  fi

#####
#####  The end
#####
[root@turbo bin]#

2. Next thing to note is the "PATH" in the above script. For some reason, when its run from command line, its ok, but when run from cron there were all kinds of library failures. So setting the path the way I did it above clears that issue for me. That allows this to run without intervention. In fact its been about 2 years or more since I have even looked at this stuff - it just runs and runs and runs - with no complaints.

3. It is important to note, that in order to run multiple sites, you really need to have each site with its own ownership, otherwise one user could hose a different users site. We dont want that, neither accidently nor maliciously. So the user entry looks similar to the following entry. Note that the home directory is the top level of their website.

pictures:*********:9999:550:Pictures User,,,:/export/apps/www/pictures:/bin/bash

4. Now to the cronjobs. In order to fully automate this, cronjobs need to be setup. All they do, is to pass in the website name, and run the script. Back in the day when this ran on the Cyrix 686 166Mhz box, it could run for almost an hour in each case - so I couldnt schedule these any more frequent than one per hour. But now, as a virtual machine on my quad xeon, they actually complete in about 10 minutes or less - so I could really do them every 15 minutes if I wanted. The "users" would like that better, but I just havent gotten around to it. The advantage to that is that there is less time for the user to wait after the drag-n-drop completes, in order to see the results. The disadvantage is that for a site like DRPRods that has over 1000 pictures, you dont want 2 copies of this running at the same time (I really should have a lock file, or duplicate check in the script ... perhaps in the next version) So anyway, here is the cron listing :

#####
#####  Generate slide shows for websites
#####    - mine at midnight and every hour there after
#####
0 * * * * /usr/local/bin/create_slides.sh pluzzi

5. Now, at this point we know the script to gen the JIGL pages, we know the cron jobs, we know the ownership, and now we need to see how the world can see them. In each and every "/usr/local/apache/htdocs/$SITE/pix" directory, there is an html file that is basically the same in every case, except for the actual "gen" script in the META line. So here is that index.html file in the pix folder :

[root@turbo pix]# more index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
  <title>Paul A. Luzzi's Pictures</title>
  <META HTTP-EQUIV="REFRESH" CONTENT="0;URL=/cgi-bin/gen_pluzzi_index.sh">
</head>

<body>
  <P>
</body>
</html>
[root@turbo pix]# 

6. And wrapping it all up now, here is the cgi-bin script that the above "index.html" page calls. What this does is to walk through each subfolder under "pix", convert the underscores to spaces in any directory names for display purposes, builds a quick little table to make display easier, and links to the JIGL pages that were generated.

[root@turbo pix]# cat /usr/local/apache/cgi-bin/gen_pluzzi_index.sh
#!/bin/ksh
#
#####
#####  Written by Paul A. Luzzi on 12-21-2003
#####    Purpose is to create an index of pix
#####

#####
#####  Setup the location of the picture files.
#####
DATA_FILE_LOC="/export/apps/www/pluzzi/pix"
HOME_URL="http://www.bigdenmac.com/pluzzi/"

#####
#####  Other vars
#####
MAX_ROW_COUNT="10"

#####
#####  Setup the html page, header, title, etc
#####
echo "Content-type: text/html"
echo ""
echo ""
echo "<HTML>"
echo "<HEAD>"
echo "<TITLE>My Pictures</TITLE>"
echo "</HEAD>"

#####
#####  Now put the form together for output to the screen.
#####
echo "<body TEXT=\"#000000\" BGCOLOR=\"#FFFFFF\" LINK=\"#0000FF\" VLINK=\"#0000FF\" ALINK=\"#FF0000\" BACKGROUND=\"../../graphics/backgrnd.gif\">"
echo "<p>"
echo "<center><h1>My Pictures</h1></center>"
echo "<center><img SRC=\"../images/bar-med-black-blue.gif\" WIDTH=\"686\" HEIGHT=\"6\"></center>"
echo "<p>"
echo "<center>"

#####
#####  Open the table ...
#####
  COUNT="0"
  echo "<CENTER>"
  echo "<TABLE BORDER=1>"
  echo "  <TR valign=top>"
  echo "    <TD>"
  echo "      <TABLE border=1 cellpadding=5>"

#####
#####  Loop thru all entries monitoring selection.
#####
  cd $DATA_FILE_LOC
  /bin/ls -1 | /bin/egrep -v "lost\+found|image_db.aid|archives|full_size|thumbs|index.html" | while read ENTRY
  do
    #####
    #####  Picture info
    #####
    ROW_NUM=`expr $COUNT + 1`
    if [ "$ROW_NUM" -gt "$MAX_ROW_COUNT" ]
      then
        ROW_NUM="1"
        echo "        </TABLE>"
        echo "      </TD>"
        echo "      <TD>"
        echo "        <TABLE border=1 cellpadding=5>"
      fi
    INITIAL_DEST="${HOME_URL}pix/"
    FINAL_DEST=`echo "$ENTRY" | /bin/sed -e "s/ /%20/g" -e s/\'/\\'/g -e s/\'/\\'/g `
    DESTINATION="${INITIAL_DEST}${FINAL_DEST}/"

    #####
    #####  Setup the "pretty print" title for the movie
    #####
    PRETTY_DEST=`echo "$ENTRY" | /bin/sed -e "s/_/ /g"`

    #####
    #####  Setup the table entry
    #####
    echo "        <TR>"
    echo "          <TD VALIGN=\"top\" ALIGN=CENTER>"
    echo "            <A HREF=\"${DESTINATION}\">${PRETTY_DEST}</A>"
    echo "          </TD>"
    echo "        </TR>"

    #####
    #####  Update row counter
    #####
    COUNT="$ROW_NUM"
  done

  #####
  #####  Close table cell within a table
  #####
  echo "        </TD>"
  echo "      </TR>"
  echo "    </TABLE>"

#####
#####  Close the table
#####
  echo "  </TD></TR>"
  echo "</TABLE>"
  echo "</CENTER>"
  echo "<P>"
  echo "</center>"
  echo "<center><img SRC=\"../images/bar-med-black-blue.gif\" WIDTH=\"686\" HEIGHT=\"6\"></center>"
  echo "<center>"
  ## echo "<P><A href=\"JavaScript:history.back()\">Back</A>"
  echo "<P><A href=\"../index.html\">Back</A>"
  echo "</center>"

#####
#####  Close the page
#####
echo "</FONT>"
echo "</BODY>"
echo "</HTML>"
[root@turbo pix]#

Thats it for the steps.

Tuning / Customization

So with all that said, you now know how to automate this. With "winscp" loaded on each user's desktop, they just launch it, they know what password to put in to get access to their site, and that gets them to the Windows Explorer like interface.  They can then just drag and drop from "my pictures" (on the left side, their local folders) to the "pix" folder (on the right side, the website folder). Note that I could even make this one step easier by making the "pix" folder be part of their home directory for the user, then they wouldnt even have to navigate anywhere in order to do drag-n-drop, but I didnt choose to do that because some users actually use NVu or WebPageMaker to build other pages.