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!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

 

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, minmax(0, 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, minmax(0, 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, minmax(0, 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.

 

 

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a "paid scripts and courses" business, so every little bit of support helps.

Buy Me A Meal Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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

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

Just put your images into different category folders, and repeat the “get list of files and output HTML”. 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