Back to DFS's Workshop Page
Back to Agenda Page

Project: Creating a Picture Website

Nowadays, more and more people want to publish their photographs on the web. This project will result in a set of scripts which will greatly automate and facilitate the process of setting up such a site.

A reasonable quality photo taken with current technology is usually stored in JPEG format and is about 600KB in size. A browser can be sent one of these picture files and instructed to display a thumbnail version of it using the height and width attributes of the img tag -- this thumbnail could then be clicked to see the original, full-sized version. However, if 50 pictures are to be handled in this way, 30Meg of data would have to be downloaded to create a page with the thumbnails. It would be much more economical with regard to bandwidth if thumbnails (of about 3KB each) were created and downloaded after which the viewer of the page could select just the picture(s) desired for viewing.

This project consists of two parts: (1) Creation of the thumbnails and (2) Inputting/editing of picture information and creation of a portable index.html file. The site map below shows the organization of linkage of the scripts to be written. The "Brief Description" links take you to general descriptions in this file, while the "Problem" links take you to step-by-step instructions on how to solve the problem posed by that particular script.

OrganizingPics.html              Brief Description
|
\---pickpicdir.php               Brief Description Problem
|   |
|   \---makethumbnails.php       Brief Description Problem
|       |
|       \---showthumbnails.php   Brief Description Problem
|                            |
\---pickeditpicdir.php       |   Brief Description
    |                       /
    \---editpicinfo.php ---/     Brief Description Problem
        |
        \---createindex.php      Brief Description Problem

Your scripts are to do the following.

• The HTML Page: OrganizingPics.html

  This file provides access to two of the scripts, pickpicdir.php and pickeditpicdir.php, both of which allow you to navigate through the subdirectories in your public_html directory. The first allows for the creation of the thumbnails, followed by inputting of organizational and descriptive information, and finally the creation of the index.html script. The second allows for the editing of previously inputted information and the creation of a new index.html script.

• Create Thumbnail Pictures

  1. Finding the picture directory: pickpicdir.php
     

     This recursive script allows you to navigate through the public_html directory to the directory which holds your JPEG pictures. When you arrive there, you click on a link to proceed to the makethumbnails.php script.

  2. Creating thumbnails in a subdirectory: makethumbnails.php
     

     This script creates a thumbnail for each JPEG and places it in a subdirectory called Thumbnails, creating it if necessary. Two seconds after a list of the pictures processed is displayed, the script calls showthumbnails.php. It also creates a file called piclist.txt which contains the names of the full-sized pictures and thumbnails in template form which will be used in the second part of the project.

  3. Displaying the thumbnails created: showthumbnails.php
     

     In lieu of the index.html script which has not yet been generated, this script displays all of the thumbnails which were just created by makethumbnails.php. Each thumbnail serves as a link to the larger picture from which it was created. The page generated also has a link to the editpicinfo.php so information about the pictures can be added to the piclist.txt file.

• Input Picture Information and Create index.html File

  1. Finding the picture directory: pickeditpicdir.php
     

     This file is almost identical to pickpicdir.php. The directory navigation script is the same, while the link is to editpicinfo.php instead of makethumbnails.php. This script allow for an entry point so that previously entered data can be altered/enhanced.

  2. Entering information about the pictures: editpicinfo.php
     

     This script creates/edits the title and group names for the pictures in grouplist.txt. It also allows for the editing of the group and item number and the entering of the caption for each picture.

  3. Creation of an index.html script: createindex.php
     

     This final script saves the information inputted in editpicinfo.php and creates a portable index.html script for displaying the thumbnails as links to the original pictures and organized according to the groups created in editpicinfo.php along.

To see how this could work, view this possible solution.