CODEWITHSUNDEEP
javascripthtmlcss
ilsloaoycd
ilsloaoycd

Reputation: 113

Show all images in a directory on an html page automatically

I have a directory on my server called "Uploads". It is full of images that users have uploaded. Each time somebody uploads an image, it adds it to the directory. I am using the css property display: grid; for my images to be in a nice grid. Here is the basic layout :

.imgSet {
            float: left;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .imgSet div {
            float: left;
            width: 30%;
            background-color: #333;
            border: 2px solid lightgrey;
        }
        
        .downloadImg {
            width: 95%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
<div class="imgSet">
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <br>

                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <br>

                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <div>
                    <a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download><img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"><h3>Click an image to download it.</h3></a>
                </div>
                <br>
            </div>

I want each image in the Uploads directory to create a new div, a, and image tag for it to be in. The src attribute, as well as the href attribute of the a tag need to contain the url /Uploads/imageurl.extension as well as holding the same classes. If there is an easy way to do this with javascript it would help my page a lot. Thank you in advance.

Upvotes: 1

Views: 8962

Answers (1)

VoidChips
VoidChips

Reputation: 337

I added the divs directly through javascript. I looped through the array of links to create the divs. I didn't really do much with css. There are 3 pictures in each row. If you want something else just change the css and the array in javascript to edit the image links.

const links = ['https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg', 'https://jeffthecow.com/assets/images/jeffinSpace.jpg'];

for (link of links) {
  document.getElementById('container').innerHTML += `<div>
  <a href=${link}>
  <img src=${link} alt="jeffthecow" width=120 />
  </a>
  </div>`;
}
#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
<!DOCTYPE html>
<html>

<head>
  <title>test</title>
</head>

<body>
  <div id='container'></div>
</body>

</html>

Upvotes: 2

Related Questions