CODEWITHSUNDEEP
javascriptphphtmlautomationgallery
WPdM
WPdM

Reputation: 43

Load images from folder into HTML page for display in gallery/album automatically as they are added to folder

I have recently found and purchased a beautiful HTML5 Ajax template that includes a gallery section in the main content section of the page that looks like this:

<!-- Main Content -->

<div class="ajax-inserted-content">

    <!-- Section Gallery -->
    <section class="section gallery grid layout-4-col">

        <div class="container">
            <div class="row">

                <!-- Gallery Item -->
                <div class="col-3 col-lg-4 col-md-6 col-sm-12">

                    <div class="gallery-item">
                        <div class="gallery-img">
                            <img data-lazy-image
                                 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg=="
                                 data-src="img/demo-img-2.jpg" alt="Demo img">
                        </div>
                    </div>

                </div>
                <!-- /Gallery Item -->

Now, I can add images manually to the gallery and in the HTML file by copy/pasting the "Gallery Item" sections and adding the image src and so on, but I have whole folders full of images (all .jpg but with different and various titles) so this is not an option.

About a decade ago I had a Flash website that had a gallery that was populated from folders using - as far as I can remember - an XML/PHP combination. There was no need to edit the actual HTML document. I expected there to be a (simple) PHP/XML option with this modern photography template, but alas. The developer of the template can't help me out either so now I'm stuck with a beautiful but useless template if I can't get this proces of populating the galleries and albums automated.

Thus my questions are as follows:

  1. is there a customisable tool (like a plugin?) that can automate this for me that I can install server side so I have a wysiwyg option to upload images (drag and drop, upload from folder, etc) and point to the HTML page/code/gallery section into which the images need to be displayed?
  2. if option 1 is not available, then are there ready-made XML/JSON/PHP scripts available anywhere that will do the same with a minimal amount of coding for customisation (possibly with only the need to upload image files and edit an XML file to get the images displayed in the HTML gallery page properly)?
  3. if option 1 and 2 are not possible, does anyone have a solution for this issue?

I know there are plenty of options out there and have found various and simple-looking (PHP/JS) scripts and code that claim to do exactly this, but they all involve creating a simple HTML page and gallery from scratch. I have no idea how to customise all that code to work with my HTML/CSS/JS website...

So I'm very much hoping that your suggestions will give me a budget-friendly solution, or I will have to buy me a totally new template that has the automated gallery scripts built-in

Upvotes: 4

Views: 5859

Answers (1)

Kinglish
Kinglish

Reputation: 23654

The PHP way

a PHP loop generated from scadir() would make this pretty easy. https://www.php.net/manual/en/function.scandir.php

I'm assuming the src="data:image/svg+xml;base64,PH... is a placeholder, the same for each image

<div class="ajax-inserted-content">
  <!-- Section Gallery -->
  <section class="section gallery grid layout-4-col">
   <div class="container">
     <div class="row">
     <?php
        $imagesPath = '/imgportfolio/';
        // this is assuming your website has a folder at the document-root level called 'portfolio-images'.
        // document-root means where your top level index.html (or index.php) is.
        $dir = $_SERVER['DOCUMENT_ROOT'] .  $imagesPath; 
        $files = scandir($dir);
        $exts = ['png','jpg','jpeg','gif','bmp','webp'];
        foreach ($files as $file) {
          if ($file === '..' || $file === '.') continue;  
          $ext = explode(".", $file);
          $ext = strToLower($ext[count($ext)-1]);
          if (!in_array($ext, $exts)) continue; // if not a valid image file, skip 
     ?>
  <div class="col-3 col-lg-4 col-md-6 col-sm-12">
     <div class="gallery-item">
       <div class="gallery-img">
         <img data-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" src="<?php echo $imagesPath . $file;?>" alt="Demo img">

         <!-- <img data-lazy-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" data-src="<?php echo $imagesPath . $file;?>" alt="Demo img"> -->
       </div>
     </div>
   </div>
        
    <?php }?>

Also, for testing (if you suspect PHP errors,) you can put this at the top of your page

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>

The (I don't want to use) PHP Way

There are some experimental features out there for reading a filesystem using javascript. For the most part they're not embraced by all modern browsers (IE doesn't allow them at all), and the complexity they introduce is more than you probably want to deal with.

However, in the past I have used this trick to create a simple portfolio. It requires your (re)naming your images to be in a predictable numeric sequence like

1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 7.jpg, etc...

In your case the implementation would look like this:

<div class="ajax-inserted-content">
    <section class="section gallery grid layout-4-col">
        <div class="container">
            <div class="row" id='gallery-items'>
            </div>
        </div>
    </section>
</div>
<script>
function doPortItem(n) {
    let img = document.createElement('img');
    img.src = './imgportfolio/' + n + '.jpg';
    img.addEventListener('load', () => {
        let div = `<div class="col-3 col-lg-4 col-md-6 col-sm-12">
     <div class="gallery-item">
       <div class="gallery-img">
         <img data-lazy-image data-src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" src="${img.src}" alt="Demo img"> 
       </div>
     </div>
   </div>`;
        document.querySelector('#gallery-items').innerHTML += div;
        doPortItem(++n)
    })
}
doPortItem(1)
</script>

Notes - Files must start with 1.jpg and have to be sequential. It loops through the numbers until it finds a X.jpg that doesn't exist, then it stops. Also, this looks for a folder called imgportfolio in the same directory as the .html file. Tested and works!

Upvotes: 4

Related Questions