Yesterday I integrated UniteGallery into my girlfriend’s website and I’m quite pleased with the results. I may end up writing an OctoberCMS plugin to this end, but for now I’d just like to make some notes on how this was done.
Note that if you do a cursery breeze on GitHub, you’ll see that there are many many javascript-based lightbox and gallery plugins out there, and UniteGallery is not on the top of the list. But it has many things going for it:
It is not only a full-blown photo-viewer (with mobile/swipe support) but it also creates your galleries for you, and you can choose from various gallery themes!
It is open-source with an MIT licence
It is based on jQuery
It has a great demo page where you can try out all the options
Speaking of options there are many, enabling you to customize it to your needs (you can even develop a skin or a theme for it)
I’ve emailed with the author and he is quick to respond and very helpful
There is not much to getting UniteGallery working on OctoberCMS if you just want to hardcode pitcure paths, and really all the instructions you need are included in UniteGallery’s own documentation. However I don’t like to hardcode, instead I wanted to write a function that would iterate through a folder and dynamically load all of the images into UniteGallery. Additionally, I didn’t want to have to manually generate thumbnails. Luckily we already have some great OctoberCMS plugins just for that purpose. I ended up using Matthew Pawley’s October Image Resizer plugin. It’s nice because it doesn’t have any dependencies and can optionally compress your files using TinyPng.com.
To the point
Preparations
Install Matthew Pawley’s October Image Resizer plugin in your site /backend
Download UniteGalleryand upload it somewhere in your site (I put it under assets/js/unitegallery which may arguably not be the best place, but this way if I switch or update themes I won’t lose my unitegallery js) OR use a CDN if you can find one
Create a new «gallery» page somewhere under pages and add the Image Resizer plugin component to it (just drag & drop somewhere).
Open the Media page in your OctoberCMS backend and create a subfolder under to hold all of your galleries, I called this folder galleries
Create a subfolder under your galleries folder for each gallery you will have, for example galleries/cute-cat-pics and galleries/ufo-sightings and galleries/my-bombisha-collection etc.
Resize your photos to a size appropriate for web viewing
Upload your photos into the above galleries
Jot down the extensions of your photos (mine were all jpg or jpeg , you may have gif or png etc.)
The code will expect to receive the folder name of your gallery as a URL parameter. To set this up, update the URL of your gallery page in the backend to follow this example:
So if your page’s URL code is «gallery», then add «/:gallery_code» to it. This tells OctoberCMS that you are expecting a gallery code in the link to the page.
The second part is for security, it is a regular expression that ensures that someone can’t just pass any arbitrary expression to your page. In our example we are allowing three galleries named «cute-cat-pics», «ufo-sightings», and «my-bombisha-collection.»
You can read more about URL parameters in the official docs.
Step 2 – Place the following into the «Code» part of your page:
function onStart() < // Options: $mediaPath = storage_path() . "/app/media"; $mediaSubDir = "galleries"; $extensions = array("jpg", "jpeg"); $maxImages = 100; $validGalleryNames = array("cute-cat-pics", "ufo-sightings", "my-bombisha-collection"); // end of options! $galleryName = $this->param('gallery_code'); $galleryPath = @"///"; if (!in_array($galleryName, $validGalleryNames) || !File::isDirectory($galleryPath)) < $this["images"] = array(); return; >// Using Glob would arguably be a better alternative as it is native php // - see http://php.net/manual/en/function.glob.php // But we stick to Laravel's File interface //$fils = glob(@"//*.jpg"); or glob( themes_path( $theme_dir ) . '/*.', GLOB_BRACE ) $files = File::allFiles($galleryPath); $images = [ ]; $i = 1; foreach ($files as $file) < if ($file->isFile() && $file->isReadable() && in_array ($file->getExtension(), $extensions)) < // List of methods available: http://php.net/manual/en/splfileinfo.getfilename.php $images[] = str_replace(@"/", '', $file->getPathname()); > if ($i > $maxImages) break; $i++; > $this["images"] = $images; >
The above code basically searches through all files in a given directory, finds any files that match any of the given extensions in $extensions and dumps the relative paths into $this[«images»].
You can update the $mediaSubDir variable to match the directory you created to hold all of your galleries in step 1, and limit the number of images you wish to show in $maxImages .
As an added security measure, we also add all valid directory names into the $validGalleryNames array. We already validate the gallery names using OctoberCMS’s parameter validation technique, but it doesn’t hurt to double-check!
Step 3 – Set Your Page Markup
Now add something along these lines to your page markup:
>" type="text/css" />
The . part just makes sure that the required js and css files are loaded. You should have downloaded these from the UniteGallery github page and uploadet them somewhere into your site as part of the preparations. You will need to update these links.
The part is where you generate the links to your gallery images. The onStart function you placed into the page code tab ensures that there is an images array that you can iterate over – this is what the part does. The ) >> twigly-doo takes your image, properly qualifies it (see |media filter), and uses the |resize twig extension provided by the Image Resizer Plugin (that you dropped into your page back in the preparations section, right?).
The . part fires up UniteGallery. You can set various options to your heart’s desire as described in the UniteGallery documentation.
Step 4 – Add Links to your Gallery
And finally you can now add some links to your galleries into your menu or wherever.
) >>">
) >>">
As you can see, you should pass the name of the directory of the gallery you wish to show in the gallery_code URL parameter.
This is what one of the galleries looks like on my gf’s new homepage:
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/*.», GLOB_BRACE);
foreach ($images as $i) < echo ""; >
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
TABLE OF CONTENTS
PHP SIMPLE IMAGE GALLERY
All right, let us now get into creating the very basic image gallery – Requiring only a few lines of PHP code, it’s so simple that you will laugh all the way to the moon.
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"); >> >);
On window load, get all the gallery images.
On clicking the image, toggle the .full CSS class – This will show the image in fullscreen.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
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.
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 BITS & LINKS
That’s it for all the code. Here are some extras that may be useful to you.
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.
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 .
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
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*.", GLOB_BRACE); // (B) OUTPUT HTML foreach ($media as $i) < $parts = pathinfo($i); if ($parts["extension"]=="avi" || $parts["extension"]=="mp4") < printf("", basename($i)); > else < printf("", 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
This simple gallery will work on any modern browser.
USEFUL LINKS
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET
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!
) >>"> 
