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?

Creating a no-database PHP image gallery is as easy as getting a list of image files using glob() and outputting them in HTML.

  • $images = glob("PATH/GALLERY/*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE);
  • foreach ($images as $i) { echo "<img src='gallery/". basename($i) ."'>"; }

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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

gallery.php
<!-- (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

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

gallery.js
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

caption-gallery.php
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>.

 

 

USEFUL BITS & LINKS

That’s it for all the code. Here are some extras that may be useful to you.

 

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

 

TUTORIAL VIDEO

 

THE CHEAT SHEET

Simple No Database Gallery With PHP (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope that it has helped you to create a better (and simpler) image gallery, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

44 thoughts on “3 Steps Very Simple PHP Gallery (From Folder No Database)”

  1. hi great tutorial, thanks, would it be possible to have all the images in one row with left and right scroll buttons, similar to a carousel?
    thanks very much !

  2. Great PHP Gallery, easy and simple. Thank you so much for the tutorial!. I have problems with PNG files with transparent background. The thumbnails created are all black. Is there a way to add background, for example in white? When i try to open the thumbnails in file explorer, it tells me that the files are corrupt….
    Thank you again!

      1. Yeah! That was great! I changed de CSS to avoid pixeling small images:
        #gallery img {
        box-sizing: border-box;
        width: 25%;
        max-height: 150px;
        padding: 5px;
        /* fill, contain, cover, scale-down : use whichever you like */
        object-fit: contain; <– changed from cover.
        cursor: pointer;
        }
        Now i'll try to make all directory recursive.
        Tank you so much!

  3. Is the gallery great, a query, how could it be modified so that the latest added photos are the first to be seen? Thank you.

      1. Hi, great tutorial for lightweight solution!
        I have a hard time applying this properly to your tutorial. How and where would you add this?
        Also is there a possibility to add left and right buttons to cycle through the images once you open them to the lightbox?
        Newbie asking. Thanks! 🙂

      2. Yes, of course, it is possible to add left/right on top of this one – But if you are having trouble understanding this “barebones gallery”, I will highly suggest you start with the basics and understand what is going on first… P.S. Read the entire tutorial, the answer is literally right above in the extras section.

  4. thank you for this solution.
    i could use some help with two issues:
    1) what is needed to be able to replace the “gallery” folder with /full/path/to/some/other/folder? i tried this and my gallery remained white
    2) when i click images that are too big for the screen, they do get opened full size and it is not possible to use scrollbar, middle click, etc. how to i tell php/js to just scale correctly?

    best
    benedikt

      1. Thanks W.S. Toh for your very nice gallery code, it helped me a lot.
        I had the same issue as benedikt and i made light changes that fully address the needs in responsive mode:
        I modified only 2 lines in the “file 2-box.css”:

        #lfront img {
        max-width: auto;
        max-height: 100vh; <=== this first line modified
        margin: 0 auto;
        display: block;
        }
        #lback {
        height: 100vh; <=== this second line modified
        background: #000;

        Best regards. johann

  5. Great Job!!!!
    its posible to add buttons under the image popup to share on Instagram, Facebook and tweeter???

  6. Super easy and simple. Thank you!

    One thing someone else may run into:

    My camera by default would make the file name and extension all in uppercase. So the script behaved like the gallery folder was empty until I changed all the photos from .JPG to .jpg

    1. Just add Uppercase JPG to the selection … faster

      $files = glob($dir . “*.{JPG,jpg,jpeg,gif,png}”, GLOB_BRACE);

Leave a Comment

Your email address will not be published. Required fields are marked *