User Tools

Site Tools


This page exists within the Old ArtZone Wiki section of this site. Read the information presented on the linked page to better understand the significance of this fact.

Using CGI to Create Your Online Art Gallery

Author: greenbd

Tools Needed

  • Terminal emulator (optional)
  • Text editor
  • Graphics editor
  • FTP program
  • Web account

Support Files

Introduction

Have you ever wanted to display your work online in a format that people can easily browse through, but personalize it more than you can at places like Renderosity, while keeping it easy to update? Then this tutorial is your solution!

400-028a3.jpg

Step 1 - Preparing your graphics

Download the ZIP file I've provided, which contains all the basic files and directories you'll need for this project.

Save all the renders you want to show online as JPEGs in the folder called images, and save thumbnail versions of them in the folder called s (for 'small'). (If you have Photoshop 6 or 7, you can automate this process by selecting File > Automate > Web Photo Gallery.)

Step 2 - Preparing the web pages

You will need the following four files, which I've provided in the ZIP, to generate your gallery. Open them in your text editor.

  1. index.htm (the “front page” of your gallery),
  2. art.dat (the data file with information about your pictures),
  3. gallerymaker.cgi (which generates the thumbnail display on index.htm), and
  4. gallery.cgi (to display your pictures individually).

Step 3 - The front page

Feel free to jazz up index.htm however you like, but it will run fine with everything that's there now.

Step 4 - The datafile

This file, art.dat, is the crux of your gallery system. It is set up as a “flat-file database, ” i.e., a pipe-delimited data file that gallery.cgi and gallerymaker.cgi will be able to parse and interpret.

Figure out what information you want your galleries to use, and divide your file up by information category. For example, I include a file name (which I keep the same for the thumbnail and the full-size image, to save work), the pixel dimensions of the thumbnail and the full-size image, and some room for explanatory text. So the basic format would look something like this:

Filename|t. width|t. height|width|height|Title|Comments

In practice, that might look something like this:

mike|75|75|600|480|King Michael|Portrait as a royal.

yummy|40|75|400|750|Tastes Like Chicken!|The Millennium Dragon meets his match.

It's VERY IMPORTANT that all the data for each picture stays on a single, separate line. If there are any line breaks except between the data for different pictures, the scripts will read the second half of the data for one file as information for a second picture.

Also note that I didn't include “JPG” in the file name section. That's because I wanted to save time and space by having the script just add it to all the file names automatically. If you use pictures in different file formats, edit the data file and scripts accordingly.

Now you're ready to tweak gallerymaker.cgi, which will display a table of all your thumbnail images on the front page, all linked to the full-size versions.

What goes on the first line of the file will depend on where the Perl compiler lives on your web server. It will usually be something such as /usr/local/bin/perl or /usr/bin/perl. To find out the proper path, log in to your site through Telnet or another command-line program, and type whereis perl at the prompt.

The next bit is the part of the script that's doing the most work. Make sure that whatever you enter in the datafile corresponds with the items in the list of scalars (variables preceded by a '$').

foreach $i (@lines) {

chomp($i);

($name, $tw, $th, $w, $h, $alt, $caption) = split (/|/, $i);

}

After every seventh thumbnail, if ( $pic % 7 == 0) starts a new row in the table. Feel free to play around with the specific names and numbers I've given to variables'“just make sure you stay internally consistent, and don't change any of the commands unless you know Perl reasonably well.

That's it!

The last file, gallery.cgi, is the most complex, but it's basically just another variation on gallerymaker.cgi. Here's the only part of it you'll need to tweak:

if ($next > 3){

$next = 1;

if ($prev<1){

$prev = 3;

}

Just change each '3' to the total number of images in your gallery. That way, the 'next' and 'previous' links will loop around to the front and back of your gallery, respectively, when you click 'next' on the last picture or 'previous' on the first.

Step 7 - Uploading your files

400-028b3.jpg

Now that you've finished editing all your gallery-generating files, upload them to your website along with your images and s folders. Open up index.htm in your web browser and see what you get!

Step 8 - Setting permissions

400-028c3.jpg

If the page gives you error messages, on the first viewing, don't despair. There's a good chance that your file permissions are improperly set. Make sure that the permissions on your CGI files are set so that you can read, write and execute them. Sometimes you can do this from within the FTP program.

400-028d3.jpg

Alternatively, you can go back into your command-line Telnet program, make sure you're in the same directory as your gallery pages are, and at the prompt, type chmod 755 *.cgi . This will set the permissions of all files ending in '.cgi' to 755, meaning that the server will give them permission to run.

Step 9 - Final check / troubleshooting

Reload index.htm in your web browser and try clicking through all your pictures to make sure everything's in order. If you've followed these instructions, it should work perfectly, but usually there will be a few kinks to work out. If there are any problems in the display, make sure that everything in your data file corresponds to the appropriate variable in the gallery-generating CGI files.

Step 10 - Concluding Notes

400-028e3.jpg

Once you've gotten it up and running, experiment! I've given you the information to make a bare-bones outline of a gallery, but play around with the HTML—and, if you're more adventurous, the CGI—to enhance it further, and bring it more in line with your personal tastes. To give you an idea of what can be done with it, check out my 3D art page. I'm sure you'll be able to come up with even more creative variations!