3 Steps Very Simple PHP Gallery (From Folder No Database)

Welcome to a quick tutorial on how to create a very simple PHP gallery. Tired of all those complicated gallery plugins on the Internet?

Yep, just like that in 1 minute. But how does this work exactly? Let us walk through a no gimmicks image gallery in this guide – Directly reads image files from a folder, no database required. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Simple Gallery	Useful Bits & Links
Tutorial Video	The End

 

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

• There are 2 different versions in the zip file.
  • gallery.php – The simpler gallery without image caption.
  • caption-gallery.php – Alternate version with image caption.

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

 

STEP 1) PHP & HTML

<!-- (A) CSS & JS -->
<link href="gallery.css" rel="stylesheet">
<script src="gallery.js"></script>
 
<div class="gallery"><?php
// (B) GET LIST OF IMAGE FILES FROM GALLERY FOLDER
$dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR;
$images = glob($dir . "*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE);
 
// (C) OUTPUT IMAGES 
foreach ($images as $i) {
  printf("<img src='gallery/%s'/>", basename($i));
}
?></div>

Yep, that’s all to the gallery page. As in the introduction, all we are doing here is –

• Get a list of image files from the gallery folder using glob().
• Then throw them into the <div class="gallery"> gallery container.

 

 

STEP 2) THE CSS

/* (A) GALLERY CONTAINER */
/* (A1) ON BIG SCREENS */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 IMAGES PER ROW */
  grid-gap: 10px;
  max-width: 1200px;
  margin: 0 auto; /* HORIZONTAL CENTER */
}
/* (A2) ON SMALL SCREENS */
@media screen and (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(2, auto); /* 2 IMAGES PER ROW */
  }
}
 
/* (B) THUMBNAILS */
.gallery img {
  width: 100%;
  height: 200px;
  /* FILL, CONTAIN, COVER, SCALE-DOWN : USE WHICHEVER YOU LIKE */
  object-fit: cover;
}
.gallery img:fullscreen { object-fit: contain; }
 
/* (X) DOES NOT MATTER */
body, html {
  padding: 0;
  margin: 0;
}

Of course, we are not so “barbaric” to just row out raw images without any cosmetics. So here is how we use a simple CSS grid to layout the images into a nice gallery, also add some responsive mobile-friendly magic. Please feel free to modify these to fit your own project.

 

 

3) JAVASCRIPT FULLSCREEN IMAGE

window.addEventListener("DOMContentLoaded", function(){
  // (A) GET ALL IMAGES
  var all = document.querySelectorAll(".gallery img");
 
  // (B) CLICK ON IMAGE TO TOGGLE FULLSCREEN
  if (all.length>0) { for (let img of all) {
    img.addEventListener("click", function(){
      // EXIT FULLSCREEN
      if (document.webkitFullscreenElement || document.fullscreenElement) {
        if (document.exitFullscreen) { document.exitFullscreen(); }
        else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      }

      // ENGAGE FULLSCREEN
      else {
        if (this.requestFullscreen) { this.requestFullscreen(); }
        else if (this.webkitRequestFullscreen) { this.webkitRequestFullscreen(); }
      }
    });
  }}
});

Lastly, a small Javascript snippet to “click on an image to toggle fullscreen mode”.

 

EXTRA) FILENAME AS IMAGE CAPTION

foreach ($images as $i) {
  $img = basename($i);
  $caption = substr($img, 0, strrpos($img, "."));
  printf("<figure><img src='gallery/%s'/><figcaption>%s</figcaption></figure>", $img, $caption);
}

Since there is no database, there is nowhere we can store the captions. But we can still use the file name as the caption of the images – This is just a small modification to the PHP to also output the <figcaption>.

 

 

 

FILE SORT

Need to sort the files by the file timestamp? Use the usort() method after getting the list of image files.

// $images = glob(...);
usort($images, function($file1, $file2) {
  // NEWEST FILE FIRST
  return filemtime($file2) <=> filemtime($file1); 
  // OLDEST FILE FIRST
  // return filemtime($file1) <=> filemtime($file2);
});

Or to sort in the alpha-numeric order:

sort($images); // LOW TO HIGH
rsort($images); // HIGH TO LOW

 

READING MULTIPLE FOLDERS

The glob() function simply returns an array of image files, so we can combine it with the use of array_merge() when required.

$images = array_merge(
  $images, 
  glob(ANOTHER-FOLDER . "*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE)
);

But of course, this is good only as a “quick fix”. Not recommended if you have a dozen folders.

 

MULTIPLE CATEGORIES

If you have multiple folders, each for a different category, simply repeat the “get an array of image files, output in HTML”.

<h1>CATEGORY A</h1>
<div class="gallery"><?php
  $images = glob(FOLDER A);
  foreach ($images as $i) {printf("<img ... />"); }
?></div>
 
<h1>CATEGORY B</h1>
<div class="gallery"><?php
  $images = glob(FOLDER B);
  foreach ($images as $i) {printf("<img ... />"); }
?></div>

 

 

SUPPORTING VIDEOS

It is possible to do so… But it does require quite a bit of extra work. First, simply add video extensions into glob().

$images = glob($dir . "*.{jpg,jpeg,gif,png,bmp,webp,avi,mp4}", GLOB_BRACE);

Then, modify the PHP to output both HTML image and video.

foreach ($images as $i) {
  $parts = pathinfo($i);
  if ($parts['extension']=="avi" || $parts['extension']=="mp4") {
    printf("<video src='gallery/%s' controls></video>", basename($i));
  }
  else {
    printf("<img src='gallery/%s'/>", basename($i));
  }
}

Finally, the problem is – How to deal with video playback. Play while in the thumbnail size? Or engage in full-screen mode first? Check out the video gallery tutorial below if you want more.

 

USEFUL LINKS

• Working with videos? Simple PHP Video Gallery – Code Boxx
• Simple Slideshow – Code Boxx

 

TUTORIAL VIDEO

 

THE CHEAT SHEET