How to display all images from a folder in html? [closed]

0

I would like to know how I could do to list all images of a folder in my html.

I want to get my page to take all the images in my folder and populate my gallery.

For example, I have this grid:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>galeria de imagens</title>
  <link rel="stylesheet" id="bulma" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" />
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div class="container section">
    <div class="container is-12">
    </div>
    <div class="columns">

      <div class="column is-4">
        <div class="card">
        </div>
      </div>

      <div class="column is-4">
        <div class="card">
        </div>
      </div>

      <div class="column is-4">
        <div class="card">
        </div>
      </div>

    </div>

  </div>
</body>
</html>

I just want to create the div once, and in an "" automatic "" fill the rest obeying this structure of three images per line. So whenever I play a new photo in the folder it should appear on this page.

I searched and saw that this would only be possible with php, I'm studying js and I do not understand much of php.

    
asked by anonymous 24.08.2017 / 03:29

1 answer

0

To read and print all the images in a folder you can use the following php code to generate your listing.

<?php

$pasta = ___DIR__ . DIRECTORY_SEPARATOR ."images"; 

$arquivos = glob("$pasta{*.jpg,*.jpg,*.JPG,*.png,*.gif,}", GLOB_BRACE);

foreach($arquivos as $id => $img){
   echo '<div class="column is-4">
    <div class="card"> '. $img . '</div>
  </div>';
}
?>
    
24.08.2017 / 06:06