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.

 

 

TLDR – QUICK SLIDES

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• 1a-gallery.php – Simple gallery without image caption.
• 2a-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.

 

SCREENSHOT

 

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) GET IMAGES & OUTPUT AS HTML

<!-- (A) CSS & JS -->
<link href="1b-gallery.css" rel="stylesheet">
<script src="1c-gallery.js"></script>
 
<div class="gallery"><?php
  // (B) GET IMAGES IN 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'>", rawurlencode(basename($i)));
  }
?></div>

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

• (B) Get a list of image files from the gallery folder using glob().
• (C) Output them as HTML <img> tags in <div class="gallery">.

 

 

STEP 2) CSS GRID LAYOUT

/* (A) GALLERY WRAPPER */
/* (A1) BIG SCREENS - 3 IMAGES PER ROW */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  max-width: 1200px;
  margin: 0 auto; /* horizontal center */
}
 
/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */
@media screen and (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
 
/* (B) THUMBNAILS */
.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* fill | contain | cover | scale-down */
  border: 1px solid #cdcdcd;
  cursor: pointer;
}
 
/* (C) FULLSCREEN IMAGE */
.gallery img.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  object-fit: contain; /* fill | contain | cover | scale-down */
  border: 0;
  background: #fff;
}

Of course, we are not so “barbaric” to throw out raw images without cosmetics.

• (A1) display: grid; grid-template-columns: repeat(3, 1fr); will lay out in a “nice gallery format” of 3 images per row.
• (A2) On smaller screens, change the layout to 2 images per row.
• (B) width: 100%; height: 200px; to set a “uniform dimension” on all images.
• (B) object-fit is the “image scale to fit” behavior. Change this and see for yourself, choose one that you like.
• (C) When the user clicks on an image, we toggle a .full CSS class on it. Long story short, .full simply sets the image to cover the entire screen.

 

 

STEP 3) JAVASCRIPT TOGGLE 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 = () => { img.classList.toggle("full"); };
  }}
});

1. On window load, get all the gallery images.
2. On clicking the image, toggle the .full CSS class – This will show the image in fullscreen.

 

 

EXTRA) ANIMATION

/* (D) OPTIONAL ANIMATION */
.gallery { overflow-x: hidden; }
.gallery img { transition: all 0.3s; }

Long gone is the Stone Age of the Internet. To animate the fullscreen toggle, we only need to add a CSS transition. Beware though, this is not friendly for slow mobile devices… But with mobile devices becoming powerful these days, it should not be a problem anyway.

 

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>", 
    rawurlencode($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) {
  return filemtime($file2) <=> filemtime($file1); 
});

usort($images, function ($file1, $file2) {
  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 reading 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
• CSS Grid – CanIUse
• Transition – CanIUse

This simple gallery will work on any modern browser.

 

USEFUL LINKS

• Simple PHP Video Gallery – Code Boxx
• Very Simple Responsive Image Gallery (Pure HTML CSS) – Code Boxx
• Simple Javascript CSS Slideshow – Code Boxx

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET