Famil­iar­i­ty: HTML/XHTML/HTML5 + CSS + PHP

Time Required: 5 Min­utes or less


You can do real­ly neat things with the raw pow­er of Arrays. I showed you an exam­ple of pars­ing Mul­ti­di­men­sion­al arrays in PHP in my pre­vi­ous post. In this post, I’m going to show you how to cre­ate a PHP gallery with­in 5 min­utes. The basic assump­tion is that the read­er is famil­iar with XHTML/CSS and gen­er­al pro­gram­ming buzz words (e.g. vari­ables, func­tions, strings, arrays, etc.)

Here’s what we’ll be cre­at­ing at the end of this post:


There, a pret­ty sim­ple gallery that has been sex­i­fied (if that is even a term) using Light­box 2 and has raw pag­i­na­tion pow­ers, thanks to the array_chunk() PHP func­tion. Okay, before you get total­ly impa­tient to see how does this work, I should bet­ter start show­ing you “how”:

First, let’s cre­ate a basic markup struc­ture:

Save the file as “index.php” in your root project direc­to­ry, i.e., Gallery. Notice that I’ve down­loaded Light­box 2, extract­ed it to the project direc­to­ry (Gallery, in this case) and linked the down­loaded files from our main index.php file.

Now the CSS part (css/gallery.css)

Now is the time to get PHP back! Cre­ate a new file named “gallery.php” in the project root direc­to­ry and type this code:

As you can see, I’ve wrapped the code inside a func­tion for porta­bil­i­ty. The func­tion takes one argu­ment — $path. Save the script and return back to “index.php”. In this file, you need to do only two things to get the Gallery run­ning:-

  • Include the PHP code file, gallery.php, using include()
  • Call the func­tion — gen­Gallery(), sup­ply­ing the required para­me­ter.


That’s it! Demo

Note that there are lots of things that can be improved even in this tiny lit­tle script. And there are way too many nice lit­tle things that could make this gallery a rock­star! But, I only had 10-15 min­utes to cre­ate this script and write this post so.. 

If I were to spend an hour on this script, it’d had all these things:

  • Check prop­er file exten­sions (pret­ty easy to imple­ment)
  • Fetch EXIF data and dis­play it nice­ly using the pow­er­ful of JavaScript or your favorite JS Library.
  • Add “star rat­ing” fea­ture so peo­ple could give your image FIVE STARS
  • Add tag­ging sup­port
  • Add com­ment­ing
  • Pret­ty URLs
  • CRUD, prefer­ably using SQLite
  • Authen­ti­ca­tion, using SQLite

Might sound like a lot but all the things list­ed above are pret­ty easy to imple­ment in PHP. Ah, and sup­pose if Object Ori­en­ta­tion was used at that! If you like this post, go ahead and cre­ate your ver­sions (includ­ing added functionalities/improvements).

Imag­ine, Learn and Cre­ate.

Tagged with →  
Share →
%d bloggers like this: