0

Eu gostaria de saber como eu poderia fazer para listar todas imagens de uma pasta no meu html.

Quero fazer com que minha página pegue todas as imagens da minha pasta e preencha minha galeria.

por exemplo,tenho esse 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>

Quero apenas criar a div uma unica vez e de forma ""automática"" preenche o restante obedecendo essa estrutura de três imagens por linha. Assim sempre que eu jogar uma nova foto na pasta elá deverá aparecer nesta página.

Pesquisei e vi que isso só seria possível com php, estou estudando js e não entendo muito de php.

1

1 Resposta 1

1

Para realizar a leitura e impressão de todas as imagens de uma pasta você pode utilizar o seguinte codigo php para geração da sua listagem.

<?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>';
}
?>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .