Easy PHP Photo Gallery

March 19, 2007

Topics: Accessibility.

Updated 2/6/2010 — Read more below!

There are a lot of PHP photo gallery scripts out there. I know; because I went looking for one some time ago, and found myself barraged with Javascript, AJAX, and complicated installations. I didn’t want any of those things, so in the end I just wrote one for myself — and this is the end result. Download the ZIP package.

It’s not a complicated script, and it doesn’t do a whole lot for you: but, assuming you’re running on Linux with PHP, it’ll be incredibly easy for you to install and configure. View the sample installation.

What’s in the Package?

There are six main files included in this zip package (Version 1.2):

  1. gallery.php — the photo gallery script. Now contained in functions.php.
  2. index.php — the home file which includes the gallery script and contains configuration info.Configuration now in separate file; gallery files now contain only a few gallery-specific variables. You can copy this page to create additional galleries just by saving it with a new name and changing the configuration information. test.php is a second example referencing a separate gallery, to demonstrate the multiple gallery features.
  3. titles.txt — a simple text file which uses pipe-separated fields to indicate the image name, an image description, and an alt text option.
  4. title.php — a script which provides a unique title element for each image in the gallery. Now contained in functions.php.
  5. basic_styles.css — a very basic stylesheet so that your default photo gallery doesn’t look too boring. Warning: no attempt whatsoever has been made to test these styles outside of Firefox.
  6. readme.txt — installation instructions

I’ve also supplied a (very) small gallery of images for the included gallery.

What does the script do?

This is pretty straightforward. The configuration information you’ll send to the script provides the title of the gallery, the relative path to your images folder, and the name of your text file containing the image information. Using this information, the gallery script creates a page containing (in order):

  1. Navigation links to move between the previous and next images in the gallery. The sequence is the order in which you’ve listed the images in your text file. The navigation is circular, so in the initial position the previous link will send you to the last image in the gallery.
  2. A full size image with a caption. The caption is the second field in your text file.
  3. An unordered list of thumbnail images in the gallery. Again, the order is from the text file. In the default styling, the list is displayed as a panel of images rather than as a list. Each image is a link to the full sized image within the gallery.

The script does NOT automatically generate your thumbnail images. Sure, I could have done that — but my feeling is that manually creating thumbnail images will usually be more aesthetically pleasing. My preference is to create 80×80 square thumbnails cropped from the image. The tiling effect of the unordered list is much more effective with square thumbnails; and the ability to choose a particular section of the image for the thumbnail is much nicer than whatever programmatically selected truncation might have done.

Some Small Recommendations

The script allows the ability to use an alt text on your images. It also provides a description which can be used to caption the images in a paragraph either over or under the image. To me, it’s redundant to provide both descriptive text associated with the image AND a descriptive alt attribute. Therefore, I’ve also provided the option to turn off alt text in the full sized images. The default settings are what I’d recommend: visible descriptions enabled for the full size image, alt attributes left blank, and alt attributes enabled for all thumbnails.

I also recommend keeping your alt attributes short and to the point. The reason for having separate descriptions and alt attributes is because they serve different purposes: don’t try and use the description field as an alt attribute and don’t try and use the alt field for a description!

There’s nothing fancy about this script. Really — I mean it. It’s down and dirty “make me a photo gallery” programming. Use at your own risk!

Changes as of 2/6/2010

  • Improved pagination feature, adding a control to set the number of visible page links at a time.
  • Simplified support for multiple galleries.
  • Generate a list of available photo galleries.
  • Navigate through multiple galleries continuously.
  • Separated most configuration options into an external file, rather than configuring the same options for every gallery.

These changes are very substantial to the core code; although the majority of the actual code has remained the same, the structure of the code usage has been significantly revised. See the readme.txt for details on usage.

On the whole, this should be easier than ever before; although you may be in for a little work if you’re trying to revise.

Note: The basic output (HTML, unique ID’s, classes, etc.) is unchanged. The format of the titles.txt file is unchanged. The only changes are in the addition of new features, in the way configuration options are set up, and in the way information is output from the scripts.

171 Comments to “Easy PHP Photo Gallery”

  1. Hi Joe,

    It is a long time ago since i asked a question about the photo gallery. The previous version is still in use and almost completely rebuild. But i have one question about the page ‘loop’ previous – next. when navigate trough the pages you start for example by pictue 1 and finisch by 30 but when you press next again, you’re back at the beginning. Now is my question, which part of code do i need to change for simply start by 1 and end by (for example )30?

    Greetings, Mark (Netherlands)

  2. @David I can’t speak to the PHP portion; but the output is a jQuery gallery plugin called ColorBox.

  3. I’m stumpted. I have a php gallery on my website, webmaster made it for me a year or so ago, he’s gone and the new webmaster can’t find the php gallery code as the original is embedded within some big overall php set up, or something.

    Anyway you could, after seeing the gallery page on my site (click the gallery link) that you could ascertain which php gallery it is and send me the coding for it? It’s close to the one you have on this webpage.

    Thanks

  4. Joe, Greetings Sir and thank you.
    Every time I try to make one step forwards I seem to go two steps backwards.
    When I started my project I didn’t have a clue with programming.
    Your Gallery inspired me and after countless library books and ‘Google’ searches am getting far more proficient.
    However, there will come a day when I will need to hire your incredible skills.
    Currently I am still learning to understand the questions, let alone have the answers.
    The past several days I have been learning Javascript (have used it in other areas of my project) and can now currently have one image frame within cycles a set of images. This is to be the introductory page to my website.
    Within the site I will use your Gallery, as it was designed, to be used in a static mode.
    Love it, so neat and stylish.
    Joe, the objective I have is for ANYONE to be able to send me a picture and for my own email system to interrogate the image and reduce its size to 2400 x 1800 and convert from whatever format the camera image was taken into a JPG format.
    The sort of tasks you would do in Photoshop I am trying to do dynamically yet transparently to the sender. (Plus far more)
    Most of this I can now do.
    Hence currently please do not take any action on my request.
    Mind you I will have a try at getting Javascript to work within your Gallery when I get a chance and actually one gallery would be sufficient.

    Thanking you yet again, your support is incredibly appreciated.
    Philip

  5. @Philip Making the thumbnails automatically cycle would be a JavaScript addition; my goal with this gallery is to make things pretty minimal, but I’d bet that something could be added to the script which would be able to do that under certain conditions. It would be worth looking into, at any rate! Thanks!

  6. Joe greetings. Please delete the messages from 10 Sept.
    The ini file suggestion ridiculous and portrait mode resolved anyway.

    Joe is there any chance of making the thumbnails a changing collage
    say automatically skip to the next after an adjustable period of time?’

    Perhaps even cycle to the next gallery?.
    That would be awesome.
    Oh and Joe inspired by your work I have learned so much re CSS etc etc.

    Thank you.
    Philip

  7. Joe, hi again. I have been trying to use portrait pics
    in a gallery and found the scaling down to be a bit erratic.
    Not staying at a constant 460×600.

  8. Joe would it be possible to use a flat text ini file to add a new gallery.
    To make it very simple and quick to add a new small gallery.
    When you are happy with the general appearance it should be possible
    for basic additions in a few moments.

  9. Joe………………………….
    Incredibly impressed. Quite Awesome.
    Much easier to install than 1.2.
    LOVED you adding thumbnails.
    Extremely elegant code, well done Sir.

    However may I make two comments, constructive not critical.
    a)In basic_styles.css Made change #wrap {width: 640px; text-align: center; margin: 0 auto;}
    from #wrap {width: 620px; text-align: center; margin: 0 auto;}
    On different pc’s here the thumbnails overlapped the main image.
    Actually it did this also with 1.2 and I remembered my fix then.

    b)”Skip to thumbnails” does not seem to work.

    Overall opinion :- huge congratulations.

  10. Yeah, you’re right – I always have to reference the manual to doublecheck which is which. I’m guessing you didn’t alter the sort on both the full size image array and the thumbs array? There are two arrays: $image[] and $photo[], both of which you’ll need to adjust.

  11. Thx for the tip, but afaik it will change the key index as well? arsort() or krsort() seems like a better solution. I was able to revert the array with krsort() but somehow everything else stayed in the same order..

    Atm I got everything sorted already except for the thumbnails; last image as full pic and non-circular next/prev links.

    Just reverting it for the thumbnails would be ideal but I didn’t get that to work yet..