How to loop thru images in directory and image details in json

Hi,
I’ve set up a gallery of paintings using Bootstrap 4. Here’s the html for one image.

                <!--Landscape -->
<div class="d-flex flex-row flex-wrap justify-content-center">
  <div class="d-flex flex-column align-items-center justify-content-center">
      <img class="img-fluid" src="images\oils\landscape1.jpeg">
      <div class="tit-siz">
       <div style="float: left">
          <h4>Landscape</h4>
        </div>
        <div style="float: right">
          <p style="float: right" class="card-text">23cm x 18cm</p>
        </div>
    </div>
  </div>
</div>

Can I use jQuery to loop thru the jpegs in a folder and at the same time get the image details - title and canvas size - from a file with the same name as the jpeg ie. landscape1.txt or .json and generate the above code for each image?
Thanks for any help

Hi,

Nope. JavaScript run in a browser has very limited access to the file system.
You could however, do this using Node (or any other scripting language), output the results to a JSON file and then include that in your web page.

Thanks for this.
When I say folder, I’m referring to a folder that’s part of the website. If this isn’t possible can you point me to a Node tutorial that deals with what I want to do.
Thanks

Looping over files in a directory is as easy as:

const testFolder = '/path/to/image/folder/';
const fs = require('fs');

fs.readdirSync(testFolder).forEach(file => {
  console.log(file);
});

This just logs the image name, but you can easily expand that to output that block of HTML for each image the script encounters.

The only slightly tricky bit is if you need to get the image dimensions. You’d need something like ImageMagik for that.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.