Install
- Unpack the archive
- configure pix_magick.pl
- make pix_magick.pl executable with chmod u+x pix_magick.pl
- run script
Description
PixMagick is a perl script which generates an online image gallery. It works locally and synchronise with the server, configured in the head of the script.
It generates 2 images from each picture, one thumbnail for overview, one mid sized picture for viewing and it add them to index.html. When all the images are generated, they and the index.html will be uploaded on the server.
Features
- Resizes images using PerlMagick
- Uploads and downloads images and stuff using rsync
- Sideshow of pictures using javascript, by Lightbox2
- Automatically creates the html code for the web image gallery
- Group images based on their location, nesting works
- Group names are generated from directories names
- Caption of images by their filename, underscore will be replaced automatically by space
- New pictures are listed, identified by a name convention (nr_name.jpg or nr_name.JPG)
Documentation
First Configuration
When you have unpacked PixMagick archive open pix_magick.pl with an editor, then you will have to configure the following variables in the head of the script for your purpose:
| Server | |
| $SERVER_NAME | The name or URL to your server i. e. servername.url.com |
| $USER_NAME | Your login on that server |
| $SERVER_WORKDIR | Complete path to the working directory on the server i. e. /home/user/public_html/pix |
| Local | |
| $HTML_DIR | The working directory for index.html file, i. e. data |
| $directory | The working directory for the images, must be a subdirectory of $HTML_DIR and must have the same name as on the server i.e. data/pix |
| Size of Thumbnails | |
| $TUM_HORIZON_B | Size of horizontal thumbnails |
| $TUM_HORIZON_H | |
| $TUM_VERTIKAL_B | Size of vertical thumbnails |
| $TUM_VERTIKAL_H | |
| Size of Images, for automatic width set .._B to 0 | |
| $IMG_HORIZON_B | The standard values are a good choice |
| $IMG_HORIZON_H | |
| $IMG_VERTIKAL_B | |
| $IMG_VERTIKAL_H | |
| $REZ_FILTER | Filter used for resizing, available: Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc |
| $HTML_NAME | Name of the .html file of the gallery |
Your server file structure should look like this:
pix: css images index.html js pix pix/css: lightbox.css pix/images: bullet.gif closelabel.gif download-icon.gif loading.gif prevlabel.gif close.gif donate-button.gif image-1.jpg nextlabel.gif thumb-1.jpg pix/js: builder.js effects.js lightbox.js prototype.js scriptaculous.js pix/pix:
And on your local machine the file structure should look like that:
PixMagick: data pix_magick.pl README PixMagick/data: css images index.html js pix templ.html PixMagick/data/css: lightbox.css PixMagick/data/images: bullet.gif closelabel.gif download-icon.gif loading.gif prevlabel.gif close.gif donate-button.gif image-1.jpg nextlabel.gif thumb-1.jpg PixMagick/data/js: builder.js effects.js lightbox.js prototype.js scriptaculous.js PixMagick/data/pix:
The stuff for the server is located in PixMagick/data.
First Use
- Unpack the archive
- configure pix_magick.pl (see First Configuration)
- make pix_magick.pl executable with chmod u+x pix_magick.pl
Change to directory PixMagick/data and have a look at index.html to see the structure. h1 describes the caption of your image gallery. Every h2 contains a group. The images are stored in PixMagick/data.
Step 1:
Copy templ.html to index.html, to get a new gallery. You can delete the example images in pix/.
Step 2:
Change to pix/ and create the groups you want by creating new directories. Copy the pictures you want to publish in this directories. Be sure to copy, because this images will be deleted after the new resized images are created.
Step 3:
Change to PixMagick/ and run pix_magick.pl.
Press y if you want to download pictures and the gallery from your working directory on your server. Press n to continue without downloading anything. (Thats our case)
Now you can rename your pictures and the script makes the rest for you. The name of the picture is used later for their caption in the gallery. Underscore is used for space. For example 1_Our_house_in_Manchester.jpg will be displayed later as Our house in Manchester. If you don't want to show a caption for a picture you must name it none or simply press enter. The number is for sorting purpose and to give an unique file name for the same captions.
First your local working directory is listed and then the pictures (blue), which are already included in your gallery structure. The red listed pictures are identified JPEG pictures, that are new and not included in your gallery structure. Now you can include them picture by picture.
At the end you can upload the gallery to your server by pressing y.
Now your file structure should look like this:
Your index.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Example Gallerie</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
</style>
</head>
<body>
<h1>Example Image Gallery</h1>
<h2>Group1</h2>
<a href="pix/Group1/1_Hill_in_Manchester.jpg" rel="lightbox[Group1]" title="Hill in Manchester"><img src="pix/Group1/1_Hill_in_Manchester_s.jpg" title="Hill in Manchester" alt="" /></a>
<h2>Linux</h2>
<a href="pix/Linux/1_Tux_my_friend.jpg" rel="lightbox[Linux]" title="Tux my friend"><img src="pix/Linux/1_Tux_my_friend_s.jpg" title="Tux my friend" alt="" /></a>
</body>
</html>
And the results are:
The gallery with the thumbnails:
Click on the thumbnails:
With n you can show the next picture, p previous and Esc for exit.