title: Show all images in a directory on an html page automatically
body: <p>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 <code>display: grid;</code> for my images to be in a nice grid. Here is the basic layout :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="imgSet"&gt;
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
  
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
  
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;a href="https://jeffthecow.com/assets/images/jeffinSpace.jpg" download&gt;&lt;img class="downloadImg" class="downloadImg" src="https://jeffthecow.com/assets/images/jeffinSpace.jpg"&gt;&lt;h3&gt;Click an image to download it.&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>