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):
Now contained ingallery.php— the photo gallery script.functions.php.index.php— the home file which includes the gallery script andcontains 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.phpis a second example referencing a separate gallery, to demonstrate the multiple gallery features.titles.txt— a simple text file which uses pipe-separated fields to indicate the image name, an image description, and analttext option.Now contained intitle.php— a script which provides a unique title element for each image in the gallery.functions.php.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.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):
- 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.
- A full size image with a caption. The caption is the second field in your text file.
- 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.

Hello,
First question: Is it possible to create two rows of thumbnails?
Because in the script there is one tag.
Second question: Is it possible to use another file for the phote descriptions, like and HTML include or something like that. If so, how do I implemant that.
Greetings, Mark
Thanks!
Problem finally solved! I was searching in the wrong direction…
Greetings, Mark
The only edit you need to make is in
index.php, on line 17 — the variable is called$path. This is where all of the code configuration is located, as described in thereadme.txtfile.Last question, do I need to change this in the gallery.php and title.php because I don’t know witch tags I need to change I have only knowledge of HTML and CSS this is new for me.
Yes, you do. The path you’ll be wanting should be easy to figure out, since most of it is reported in the error messages on your page!
Hello,
Thanks for the quick answer, do I need to change the path in the php script?
http://www.weerlogboek.nl/fotografie/
Tanks, Mark
Hi, Mark - you need to provide the server path to your images folder in the script configuration. The path
/path/to/images/titles.txtis the example path provide in the download; you’ll be replacing this with your real server path.On your second error, I’m not sure what’s up there — the function in the download on line 11 should be
fgets, notgets.Best,
Joe
Hello,
I’m a starter with PHP, thats why I can’t solve this problem. When I uploaded the files to a special directory and open index.php this errors appear:
Warning: fopen(path/to/images/titles.txt): failed to open stream: No such file or directory in /home/3/4/f/4480/4480/public_html/fotografie/includes/title.php on line 10
Fatal error: Call to undefined function: gets() in /home/3/4/f/4480/4480/public_html/fotografie/includes/title.php on line 11
Thanks, Mark ( Netherlands )
Hi Joe. Great script. Very easy to implement into an existing site compared to all the other guff floating around the internet. I have quite a large header on my website and would like it so that when I click on one of the thumbnails or the “next” link that when the page reloads with the full sized image that it skips the header and jumps down the start of the thumbnails again. Can you help me implementing this as I don’t know enough about PHP to try it myself!
Thanks very much
Sean
Yes - you can just leave them out. You’ll still want to include the pipe separators, but can actually leave any given field blank (except the image field, obviously).
Hi Joe,
Thanks for sharing your script. Perfect solution for what I was looking for (basically creating a gallery on my freenas implementation).
Btw, is there a way to not require putting the titles of the pictures in the titles.txt file as I found that a bit cumbersome to do for each set of pictures I want to share (unless i’m missing something totally). Basically if I just want to quickly share some pictures without necessarily adding descriptions,etc.
Thanks for your help.
regards,
mal
Hi Joe,
Nice gallery. Hope you can create something that can handle multiple directories/albums.
Cheers.
Ben
Just wanted to say thanks!
Cheers /Mike
Well, I’m not aware of anything that Ken may have done - but this is on my list of things to do in June and July, so it’s possible it’ll get done relatively soon!
#
I want her to be able to maintain the site on her own, so if I have time I may code an admin page that would allow her to select a photo to upload to her page, enter a title and description and then just hit a submit button that would automatically upload the photo and update the text file. If I get around to doing that, I’d be happy to share the code with you if you’d like to have it to add on to this.
Regards, Ken
Comment by Ken Anderson — January 24, 2009 @ 10:48 am
#
Thanks, Ken - that would be great. It’s one of those things on my todo list, but since it’s been there for two years now it’s probably not going to happen soon!
Comment by Joe Dolson (588 comments.) — January 24, 2009 @ 10:53 am
Please help Ken and Joe. Ken did you do the update?. It sounds exactly what I am trying to do…and being almost 70 the mind is not what it used to be.
Did you do the modifications” I would dearly hope that you have and that they could be kindly shared with the less tallented. Yours faithfully, Philip
That’s great! Glad you were able to work things out!
Hi Joe!
Problem with the left alignment of the drop-down menu items solved!!! Now the items appear left aligned as I wanted to keep up with the style on the rest of the webspages!
There is just a minor hitch! The width of the submenu items is 260 ox on all wenpagesm however it it slightly more on these PHP photo galleries. I am trying to figure out the reason behind it! Hopefully that too shall resolve!
You can check my handiwork by clicking on the following link:
http://www.arbutusccc.org/pg_project6.php
I feel so happy!!! THANK YOU ONCE AGAIN for all your help and putting up with my silly queries! I apologise if I have troubled you!
Many thanks once again!
Regards,
Manjusha Wadekar
Hi Joe!
Just wanted to let you know that the problem with the ‘left’ alignment of the thumbnail photographs is SOLVED! Yes, removing the ‘wrap’ id from the index.php helped it! BUT the the drop-down menu items are still ‘center’ aligned. That problem is not resolved yet. Now the gallery no longer is centrally aligned but the drop-down menu items still are. Why? Any clue will be greatly appreciated!
THANK YOU SO MUCH FOR HELPING!!!
Regards,
Manjusha Wadekar
Hi Joe!
MY APOLOGIES TO YOU!
I did not look properly, the is used in the index.php file!! BUT there is which is an orphan (without its matching ) in that file! Initially when I had changed the index.php to accomodate my menu items and had removed the orphan . The index.php simply didn’t work. I wonder why? The index.php worked better when I removed #wrap (one and two s). There are 9 pairs in gallery.php and one pair and one orphan .
My head has started spinning now! I know it is a very small minor fix but I am unable to do it. It is like a great programme that is not working because it doesn’t compile due to a stupid comma! I am unable to locate that comma!
Once again SORRY for not looking at the script properly before writing to you about #wrap. Please accept the apologies!
Thanks in advance for your help.
Regards,
Manjusha Wadekar
Hi Joe!
Thank you so much for the clue! But I checked your downloaded gallery.php and found out that isn’t used anywhere! I did remove @wrap and its associated styles from the basic_styles.css but again the result is the same! There is a statement in gallery.php at the beginning. When I checked basic_styles.css, I did not find it defined there. Then I thought may be I should remove id=’gallery’ from the gallery.php file thinking that now it will not get to use any styles and then I can use my own. Surprise! I still have not got this problem resolved! It is still the same. Any other clue? If I have to define gallery style as left aligned how can I define it? (I am not a pro at CSS as I said before!)
Please help! This problem has been bugging me for some time now!
Anyway, the good thing is that using the same PHP gallery that you wrote I managed to display text in place of thumbnails and thumbnails in place of the larger view and I turned the images into links to display even larger views in seperate windows!! It worked!!!! THANK YOU FOR A GREAT AND REALLY REALLY EASY SCRIPT!!! But the same problem of left-alignment of the drop-down menu persists though! However, there is no mis-alignment of the text that is being displayed in place of the thumbnails! Cool!!
Thank you once again!
Regards,
Manjusha Wadekar
I’m sorry I didn’t respond to your first comment - I started to reply, but ended up not having a chance to finish.
At any rate, no - the #wrap styles and div are not necessary. They are in place for positioning on the sample page, but are not required in any way for the script to function. I suspect that simply removing the
div id="wrap"and the associated styles would fix your problem.And, to answer some of your other questions — wrap is used to align the whole of the gallery body in the window. The text areas within the gallery are individually aligned in other ways.
It’s my general assumption that people using the gallery will be applying it in their own unique ways, and will replace the majority of styles with their own.
Hi Joe!
Let me rephrase my problem:
Where is this ‘center’ alignment of the whole photo gallery located? I tried searching id ‘gallery’ used at the beginning of the gallery.php which isn’t defined there in the CSS basic_styles.css that you have provided. There is a ‘wrap’ class that you have defined in your CSS basic_styles.css which isn’t used anywhere in the PHPs (gallery.php or title.php). Are we supposed to use them? I don’t see the need. ‘wrap’ id has ‘center’ (used for text alignment) but if it isn’t used then why is the whole gallery ‘center’ aligned on the page? Or how is it aligned ‘center’? is ‘wrap’ a default id? A pre-defined id in CSS? Not user-defined? If I get a clue to this then probably the problem with my drop-down menu items which have been centered can be resolved. Also when the number of photos are odd (< num_per_page), the odd photo gets ‘center’ aligned again! That issue will also be resolved. I hate to use unnecessary, complicated classes and ids when simple things work. I am not exactly a novice to CSS but neither am I a pro to realize the problem in the CSS. However, the problem IS in CSS is the only thing I have figured out so far. Correct me if I am wrong. Please guide.
Awaiting your reply and thanking you in advance for all the help.
Regards,
Manjusha Wadekar
Hi Joe!
Writing to you after quite some time! Your PHP photo gallery is indeed easy to work with! However, while using it for the first time with the webpage that has drop-down menu items, I found out that the menu items in the drop down list became ‘center’ aligned which I don’t want! I want the menu items to be ‘left’ aligned! Can you please help?
The webpage which has this problem is as follows:
http://www.arbutusccc.org/pg_project6.php
Please help! Rest all worked just the way I wanted! Thank you once again for a great script!
Looking forward to your comments.
Regards,
Manjusha
Hi I’m not the best for scripts, but I made this to create a basic titles.txt from jpg-images in a folder labeled images below the index.php.
#
#!/bin/bash
cd images
ls *.jpg | sed ‘s/$/||/g’ > titles.txt
#
Interesting. Might be something about litehttpd which is causing that problem, I guess — it’s not a webserver I’ve tested the script on (or used at all, for that matter!) so it could be a candidate for something like that.
Still, as long as you’ve solved the problem for yourself, I’m not going to worry about it too much. Thanks!
Hi ,
I’m using litehttpd, as used by FreeNAS (in webserver). With your sample images folder everything works (thumbnails). But when I switch to my foto folder, thumbnails are not shown unless in lowercase. Not a big deal, since i resolved to make all names lowercase.
I added some nautilus scripts to help convert(size) & rename images.
Added a custom background wallpaper image and everything is working - peachy!
Thanks for a nice software.
I’m really not sure that’s true, chang-li — although it’s definitely the case that the file names are case-sensitive, whether the image name is lowercase or uppercase should make absolutely no difference. I can’t reproduce any error at any rate; and there’s nothing in the script which depends on case other than the normal apache web server requirement that file names be case-matched.
Nice program.I will now be able to use it.
Thumbnails are not visible unless 1st letter of image name is lowercase.
cheers
Great gallery for personal use. Thank you!
script is great got it working on my own site thank you for making it
good script especially for those who dont like to program or mess with stuff like mysql
figured it out.
it was
$path/$display
but thanks for everything!
haha, yes i tried this one before
but it result in a link looking like this.
http://www.mysite.com/images/Array0
similar results if i use
$image[$i][0]
$image[$a][0]
$image[$y][0]
$image[$i]
$image[$a]
$image[$y]
(yes, i know very little php so i go with experiment, eliminations, trial and errors…
Ah - of course. Yes, the
$imagearray is a multi-dimensional array. The image should be$image[$i][0].-Joe
no actually i made a mistake in the last post.
the
$image[$i]
results in this link
http://www.mysite.com/images/Array
if i use the
$photo[$i]
as a test; it gives me the result i’m looking for:
http://www.mysite.com/images/picture_tn.jpg
the $photo[$i] become /images/picture_tn.jpg
the $image[$i] become /images/Array
now i need something that will give me /images/picture.jpg (without the _tn)
if it’s too much problem; please don’t worry about it.
I know you wrote this script more than 2 years ago.
cheers!
Cool. Glad that’s working for you! I was responding without really looking at the script, so I’m not surprised I picked the wrong variable…
Best,
Joe
the
$image[$i]
results in this link
http://www.mysite.com/images/Array
if i use the
$photo[$i]
as a test; it gives me the result i’m looking for:
http://www.mysite.com/images/picture.jpg
thanks for the help man, and once again thank you for this great script!
I’m guessing that the problem is that you’re not actually seeing a link? With no link text or image, these links won’t be visible - they link should work with what you’ve written, but you’ll have some difficulty seeing it.
In the second string, you’ll be needing to add the array indicator as well: $image[$i].
Hope that helps! I’m not sure this is the problem you’re actually having, but it’s certainly a possibility, looking at the code you’ve supplied.
ps: here is my problem.
this work (link directly to the thumbnail image as a test)
echo "\n<a href='$path/$photo[$i]' rel="nofollow"></a>";this doesn’t work (attempt to link at the bigger image)
echo "\n<a href='$path/$image' rel="nofollow"></a>";I’ve tried many combinations (like $path/$image $path/[$i] )…
all kind of different combinations but i guess i’m just on the wrong track here.
Please help me out if you can.
thanks!!!
hello Joe
Thank you so much for this gallery.
I’ve been looking around the web for a long time to find a simple gallery that uses text files for description, paginations etc…
I could install the gallery easily and it work great!
It is very generous of you to share your codes with the world (reminds me of the movie “Hackers”
Anyhow i was just wondering if you would be kind enough to help me get rid of the big image altogether?
I just want the thumnails that link directly to the bigger version of the image (in a new window or whatever)
Thank you so much once again; even if you don’t help me with my question, you are still AWESOME!
Oh gee…I don’t know how to show it! Can I email it to you??
Sorry Joe but the line didn’t show up in the last thread…here is what shows in my document:
“echo “\n”;”
I’m sorry! I made things rather confusing by copying the same code for both statements above…I’ve edited the code to be correct — you need to remove the
imgelement and replace it with just thealtattribute text.Hmmm…I’m confused (*so sorry*)
This is the line I’m finding: (line 123)
echo “\n<a href=’?a=$i’ rel=”nofollow”></a>”;
and I’m not sure what to modify? Do you mean that I need to remove this tag: <img src=’$path/$photo[$i]’
and put in rel=”nofollow”?
Glad you figured out the problem! Using text instead of images wouldn’t be a major revision; simply edit line 123 to replace:
with:
Just be sure to provide an
altattribute text in your.txtsource file!Hi Joe! So sorry but I did miss one thread comment and it had to do with using relative vs absolute path. I was using absolute path which caused the problem. Now fixed! Thanks!
I’ve got a question though…what if I didn’t want to use thumbnails images but instead just use text as link to the large image? Could you help me with this or refer me to something that would help me out?
Thanks so much!
I’m a newbie at pHp coding and tried to find the answer through the comments above to no avail…I loaded all files to my server and changed the path to access the images. I can see everything with the exception of the thumbnail images. Should I be adding something to see them? Thanks for a great script!
Thanks, Ken - that would be great. It’s one of those things on my todo list, but since it’s been there for two years now it’s probably not going to happen soon!
Hi Joe,
Thanks for putting this out there. I’m putting together a website for my sister’s housepainting business and needed a simple way to display photos for her portfolio and found this via a Google search. I haven’t had time to fully test it out yet, but looked at the demo and skimmed over the code and it looks like it might suit my purposes nicely. If I use it on the site, I’ll give you credit.
I want her to be able to maintain the site on her own, so if I have time I may code an admin page that would allow her to select a photo to upload to her page, enter a title and description and then just hit a submit button that would automatically upload the photo and update the text file. If I get around to doing that, I’d be happy to share the code with you if you’d like to have it to add on to this.
Regards,
Ken
Thanks Krongsak! I appreciate your comments!
Best,
Joe