0

I am currently trying to make my first website where i plan to put my photos for everyone to see, it is going great but i am now encountering a pretty important problem : the html code requires me to make a div for each image i want to put in the site, and with hundreds of images that can be pretty hard.

My first idea to overcome this was to make a JavaScript script to make it iterate through a folder and slap every image onto a grid, kinda like this:

function getFolderSize(path) {
  const count = 0;
  for (file in path) {
    count++;
  }
  return count;
}

for (let i = 0, i < getFolderSize(path), i++) {
  const cell = document.createElement('div');
  cell.class = "cell";
  cell.id = "cell_" + i;
  document.body.appendChild(cell);
  const image = document.createElement('img');
  image.src = path/i.jpg;
  image.class = "image";
  cell.appendChild(image)
}

I made every cell a div to add the possibility to add text under the images in the future, but that is not the problem, instead, was wondering how to make a code to know how many files there are in the folder where i keep my images to be able to iterate through them and put them all on the screen.

All the solutions i have found are using node.js or other things, but i am new to javascript and i can't get that to work on a website.

I would be very grateful if anybody could find a solution to this, possibly beginner friendly so i can learn something from this.

Thanks.

TuNisiAa
  • 9
  • You can't: that's the whole point of JS. JS runs on the _client_, and it has not access to the directory structure you have on the _server_ for good reason: security. – Terry Oct 16 '22 at 18:59
  • Males sense, but there must be some other way, probably i am just trying to do it the wrong way. – TuNisiAa Oct 16 '22 at 19:04
  • There isn't. The only other way is for your server to inform your client what images are available in a folder: you will need a server-side implementation of accessing the folder with images in one way or another. JS alone cannot do the trick. – Terry Oct 16 '22 at 19:08

0 Answers0