Photo Gallery Content Management System
- Code for Photo Gallery Navigation
- Code for Photo Gallery—View
- Code for Photo Gallery—Create
- Code for Photo Gallery—Add Category
- Code for Photo Gallery—Delete Category
- Code for Photo Gallery—Add Photo
- Code for Photo Gallery—Delete Photo
- Code for JavaScript Photo Gallery
- JavaScript Photo Gallery
So why might anyone want to learn to make a PHP photo gallery when there are plenty of freebies out there and in control panels of websites? Because learning is fun, and you might try using this as a stepping stone for writing your own PHP gallery script. And if you don't want to learn PHP, we have a JavaScript photo gallery that we teach you about. These scripts are fun to tinker with, modify, and learn from.
There are scripts that use methods like caching, file_get_contents, php_sapi_name, apache_request_headers, timestamps, blob fields, fopen(), fclose(), fgets(), fwrite(), file(), etc., for managing photos, but this is not such a script. Our host is really fussy about allowing this stuff so we settled for creating writing, reading, and editing scripts that simply keep all the photo names and category names organized in a MySQL database, rather than trying to actually store the pictures on the server in a db as data. Let's face it, the MySQL blob storage way is less safe, slower to use than just simply displaying images in browsers in Web pages, as well as being a bigger hassle to program. And by default, PHP does not allow uploading files larger than 2Mb, without messing with directives which our host would not allow. (Can you say "security risk"?) Our way, on this page, will allow images larger than 2Mb, and loading images into online folders is easier than blob storage. In either case, the images are on the server. But in one case there are restrictions, dangers, and hassles. And delays. Not with our way. And our way has a cool thumbnail display routine where you need not click on a thumbnail image to get a bigger image—hovering does the job. If you prefer clicking, dump the mouse coordinate reading and just install onclick events on each thumbnail.
See photo-gallery.html to see how it works (it's a JavaScript simulation). Once you get used to the unique display method, you'll see just how convenient it is. The actual photos and folders are up to you to deal with. Here's what you do when you use the script. Get a bunch of photos of one category and stick them inside a subfolder with that category name in a folder called "images", and do the same for other categories—their subfolders all go in the images folder, so the path is images/yourcategory/yourpicture.jpg. This images folder must be in the same folder as the script. Then when you want to create a gallery, simply go to code-for-creating-php-photo-gallery.html and copy the code and name it cms-write-photo-gallery.php, make a config.php file, upload these and the script on this page which you'll name cms-view-photo-gallery.php and the images folder to the Web, run the cms-write-photo-gallery.php script, enter all your categories as a comma-separated string and submit it. The script then asks for all the pictures in one category (you select the category from a dropdown list—they're the ones you just entered), and this is asked for as a comma-separated string again. Then submit it, and do this for the rest of the categories too.
This assumes you have a MySQL database you can use and permissions and you know the connection data and it's in a config.php file you've edited with your own data, and that you have copied the navi.html file below and uploaded it. (Do not add anything to this HTML file—it's an include file that does NOT need anything else!) Read the names in it and see the tutorial files on each of these—make sure you grab the code from each of these and name them the name in the navi.html file below and save and upload all of them.