Shampoo: a simple PHP photo gallery

Shampoo is a very simple photo gallery script that doesn't require a database.

Shampoo screenshot Main page, showing all albums

The gallery is built using the existing directory structure, where thumbnails are created and stored by the script.

The HTML produced is minimalistic, semantic and template-based.

Unobtrusive JavaScript is used for progressive enhancement and can be removed entirely with no loss of functionality.

You can add captions and album descriptions using a very simple text file.

For a demo, visit my photo gallery.

» Download (54kB) Contents of the archive

Requirements

Your server needs to run PHP 5+ and it must understand .htaccess files because mod_rewrite is used to make nice URIs. This is pretty standard and the vast majority of commercial web hosts will have no problem with this.

In order for thumbnail creation to work, your server will also need to have GD installed. Again, any host worth its salt will have GD installed.

Instructions

Shampoo screenshot Single album view

  1. Extract the archive (shampoo.zip) into a directory on your server.
  2. Make new albums by making new directories under the one where you extracted everything.
  3. If you want captions for the pictures, open up index.txt and follow the instructions there.
  4. That's pretty much it. To see it, simply point your browser to the directory (index.php is the thing to run). For example, if you've put the gallery in the root of your domain, just go to http://www.mydomain.com/shampoo/ (or whatever you called the directory).

Video support

Starting with version 0.5, the gallery can display FLV and MP4 videos (i.e. video formats supported by the Flash plugin). Flowplayer is the player used, and is included with Shampoo so you don't have to do anything.

This is for video files placed in the gallery, like images are – not for displaying YouTube or Vimeo videos. Of course if you've downloaded the YouTube video as an MP4 or FLV and you've put it in your album, then that will of course work.

Changes

Very little has been changed to add video support, which is what shampoovideo.php is for. In index.php two lines have been changed:

functions.php has had some tiny changes added to the isValidImage and createThumb functions – nothing else.

The Thickbox files have been changed to support video too and obviously the Flowplayer files are needed, so the img and js folders need to be updated.

FFmpeg

In order to generate thumbs for each video you put in an album, FFmpeg has to be installed on your server. It will make the thumb from the first frame of the video. If FFmpeg is not present, an alternative thumbnail will be generated (see image).

Video thumbnail - panda.flv Alternate video thumbnail

If you don't have FFmpeg, it's straightforward to install if you have shell access. I followed these instructions, which should work for any host.

You might need to change the path to FFmpeg specified at the top of shampoovideo.php to the correct path on your server (I can't help with this).

Download

Download version 0.5 with video support (347 kB). Yeah, it's quite a bit bigger, mostly because of Flowplayer.

Please note this is in a sort of beta state, which is why I haven't changed the main download link to it.

For a demonstration of how Shampoo deals with videos, see this test installation with two videos.

License

BSD-style license. This means you can pretty much do whatever you want as long as you give due credit.

Problems?

If you have trouble viewing individual albums or images, it is most likely a problem with mod_rewrite and your .htaccess file (in the base directory of Shampoo).

  1. Check that mod_rewrite is enabled on your server. This can be achieved via phpinfo or by asking your host.
  2. Open .htaccess in your text editor. Below are four alternate blocks of text that may work for your setup. Try each one in succession by replacing the entire contents of the .htaccess file with it.

Shampoo screenshot Single image view 

RewriteEngine on
RewriteBase /
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+/\d+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond $1 !^/?[^/]+/thumbs(/.*)?$
RewriteRule ^/?(.+)$ index.php?fish=$1 [L]
    
Options -Indexes
RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+/\d+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond $1 !^/?[^/]+/thumbs(/.*)?$
RewriteRule ^/?(.+)$ index.php?fish=$1 [L]
    
Options -Indexes
RewriteEngine on
RewriteBase /
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+/\d+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond $1 !^/?[^/]+/thumbs(/.*)?$
RewriteRule ^/?(.+)$ index.php?fish=$1 [L]
    
RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^/?[^/]+/\d+$ %{REQUEST_URI}/ [R=301,L]
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond $1 !^/?[^/]+/thumbs(/.*)?$
RewriteRule ^/?(.+)$ index.php?fish=$1 [PT]

mod_rewrite is the most likely issue, especially if you are using a subdomain or if you know you are using mod_alias. If your filesystem is very different to the URI structure, then it is also likely you will need to use a RewriteBase directive.

The single / is most commonly needed when RewriteBase is required, but some hosts (e.g. 1and1) might require the path too. For example, if your base directory is called "pictures": 

RewriteBase /pictures

If your host supports PHP 4 and PHP 5, but it defaults to PHP4, you need to add this right at the top of your .htaccess:

AddType x-mapp-php5 .php

If any of these turn out they work out for you, I'd like to hear about it.

Contact

If the steps above didn't help, if you encounter bugs or if you have any other questions, email me:

r [at] this domain

Comments (64)

Post a comment (Optional)
  • Allowed markup: <a> <i> <b> <em> <u> <s> <strong> <code> <pre> <p>
  • All other tags will be stripped, unless they are in a <pre> (use this for blocks of code)
  • External links will have the rel="nofollow" attribute applied