The beauty of PHP is that it allows us to create dynamic content based on user input or, in this case, files on a web server.

Demo

In order to follow this tutorial you will require a web hosting plan with the ability to execute PHP, this is very standard with most paid web hosting plans available today.

To begin with I will explain the file structure that this tutorial works with:

Within your web hosting space you will create a PHP file, which will form the script that displays the contents of a directory, there will then be another directory (within the same directory as the PHP file) named ‘gallery’ which will contain the images you wish to display in your gallery. The directory that the PHP file is in doesn’t matter, as long as the ‘gallery’ directory is in the same place:

  • gallery.php
  • gallery
    • image1.jpg
    • image2.jpg
    • image3.jpeg
    • image4.png
    • image5.gif

For this tutorial I will not go into detail about the HTML or CSS styling, keeping the gallery looking very simple for you to add your own styling. We will be concentrating on only the PHP.

To start with, here is the complete code for gallery.php, don’t worry if this looks daunting as I will break down the code to explain what it does. Alternatively if you simply want to use it, download the zip file at the end of this guide.

<!DOCTYPE html>
<html>
 <head>
   <title>PHP Gallery</title>
 </head>
 <body>
   <?php
   $galleryDir = 'gallery/';
   foreach(glob("$galleryDir{*.jpg,*.gif,*.png,*.tif,*.jpeg}", GLOB_BRACE) as $photo) {
     $imgName = explode("/", $photo);
     $imgName = end($imgName);
     echo "<a href='$photo' title='$imgName'>";
     echo "<div style='float:left; border:1px solid black; width:100px; height:120px; padding:10px; margin:10px; text-align:center;'>";
     echo "<img src='$photo' style='max-height:100px; max-width:100px;'><br><span>$imgName</span>";
     echo "</div>";
     echo "</a>";
   }
   ?>
 </body>
</html>

Breaking down the code

To start off with we will look at the first 6 lines in one go as these are related to the HTML document rather than the PHP:

<!DOCTYPE html>
<html>
 <head>
   <title>PHP Gallery</title>
 </head>
 <body>

<!DOCTYPE html> defines the type of HTML used, in this case HTML5, although HTML4 would also work.

<html> forms the start of the HTML code.

<head> & </head> opens and closes the HTML header, where certain, non displayed code goes.

<title>…</title> creates the page title name (displayed in the top of your web browser).

<body> opens the body of the HTML document, where code that is displayed goes.

<?php

This tag tells the web server that the following code is to be processed as PHP rather than sent to the browser and displayed as HTML

$galleryDir = 'gallery/';

Anything in PHP starting with $ is known as a variable, this variable will contain the data gallery/ which in this case is the name of the directory our images go in ending with /.

foreach(glob("$galleryDir{*.jpg,*.gif,*.png,*.tif,*.jpeg}", GLOB_BRACE) as $photo) {
}

A foreach loop will run over and over again until it has covered all of the possibilities. Glob is used to filter contents, for example files ending in .jpg. All the code that is to be repeated in the loop go between the braces “{ & }”.

In English this sounds like:

For each file in the gallery directory that ends in .jpg, .gif, .png, .tif, .jpeg, copy the full name into a variable called $photo.

$photo’s contents will look something like this: gallery/image1.jpg

$imgName = explode("/", $photo);
$imgName = end($imgName);

Another variable is created called $imgName, the contents of $imgName is then transformed to an array by exploding (separating) the $photo variable wherever it sees a /.

At this point the contents of $imgName would look like: [1] gallery, [2] image1.jpg

The second line gives the $imgName variable new contents by using the end (last) section of the array.

$imgName would now contain: image1.jpg

echo "<a href='$photo' title='$imgName'>";
echo "<div style='float:left; border:1px solid black; width:100px; height:120px; padding:10px; margin:10px; text-align:center;'>";
echo "<img src='$photo' style='max-height:100px; max-width:100px;'><br><span>$imgName</span>";
echo "</div>";
echo "</a>";

This section of code uses PHP echo to generate HTML code including PHP variables, the following describes the purpose of each line:

  1. Create a link opening tab, the link will direct to the value of $photo and the title will display the contents of $imgName
  2. Create an opening div tag, with embedded CSS changing some of the divs properties to create boxes that display in a line, automatically moving to the next line when the edge of the browser is reached.
  3. Display an image, using the PHP $photo value as the source, using CSS to alter the height and width to a thumbnail size, finally adding the image name with the PHP $imgName value below the image
  4. Close the div tag
  5. Close the link tag
?>

This line ends the PHP script, anything past this tag will be treated as HTML

</body>
</html>

Finally we can close the body and HTML tag

How to use it

  1. This script is designed in a way that it reads the contents of the ‘gallery‘ directory, searching for images to display on the web page.
  2. Once you have written or downloaded the script, upload it to the desired location on your web server, creating the ‘gallery‘ directory in the same folder as the PHP script.
  3. Upload your images to the ‘gallery‘ directory and they will automatically be added to the gallery web page.

NBRemember to resize your images to a web friendly size before uploading them.

Download the completed script

zip-download