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

 

 

QUICK NOTES

• gallery.php – The simpler gallery without image caption.
• caption-gallery.php – Alternate version with image caption.

If you spot a bug, feel free to comment below. I try to answer short 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.

 

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.

 

 

 

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.

 

 

STEP 3) JAVASCRIPT FULLSCREEN IMAGE

window.addEventListener("DOMContentLoaded", () => {
  // (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.onclick = () => {
      // (B1) EXIT FULLSCREEN
      if (document.webkitFullscreenElement || document.fullscreenElement) {
        if (document.exitFullscreen) { document.exitFullscreen(); }
        else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      }

      // (B2) ENGAGE FULLSCREEN
      else {
        if (img.requestFullscreen) { img.requestFullscreen(); }
        else if (img.webkitRequestFullscreen) { img.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>.

 

EXTRA) SORTING THE IMAGES

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

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

 

EXTRA) MULTIPLE CATEGORIES

<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>

Just put your images into different category folders, and repeat the “get list of files and output HTML”.

 

 

EXTRA) READ ANOTHER FOLDER

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

This is another alternative to read another folder, simply use array_merge() to combine the results. Of course, this is good as a “quick fix” only. Not recommended if you have a dozen folders.

 

EXTRA) INCLUDE VIDEOS

// (A) GET IMAGES & VIDEOS
$media = glob("$dir*.{jpg,jpeg,gif,png,bmp,webp,avi,mp4}", GLOB_BRACE);
 
// (B) OUTPUT HTML
foreach ($media 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)); }
}

But 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.

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• Full-Screen API – CanIUse
• CSS Grid – CanIUse

Full-screen mode is still not fully supported on iPhones at the time of writing… So much for calling themselves “advanced”. Use the Modernizr library to detect and load a fallback or alternative if you want.

 

USEFUL LINKS

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET