How to view all images from a folder in html?

Asked

Viewed 1,634 times

0

I wonder how I could do to list all images of a folder in my html.

I want to make my page take all images from my folder and fill 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 one time and in a ""automatic" way fills the rest by obeying this structure of three images per line. So whenever I play a new photo in the folder There should appear on this page.

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

php html
  • 2

    Here is always a good start: https://secure.php.net/manual/en/getting-started.php

1 answer

1


To read and print all 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>';
}
?>

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.