Blupixel IT Blog – Articoli e Tutorial Informatica e Programmazione

Blog ufficiale di Blupixel IT Srl

Visualizzare tutte le immagini in una cartella con PHP

Supponiamo di voler creare una pagina HTML con una preview di tutte le immagini contenute in una cartella, senza dover indicizzare ogni immagine attraverso un database.

Con PHP è molto semplice, è sufficiente aprire la directory, scorrere il contenuto e stampare la preview!

Vediamo il codice:
Supponiamo di voler creare una pagina HTML con una preview di tutte le immagini contenute in una cartella, senza dover indicizzare ogni immagine attraverso un database.

Con PHP è molto semplice, è sufficiente aprire la directory, scorrere il contenuto e stampare la preview!

Vediamo il codice:

$pics = opendir('images/folder/path');

while ($filename = readdir($pics)){

    if ($filename != '.' && $filename != '..') {

        $path = 'images/folder/path/'.$filename;
        list($width, $height) = getimagesize($path);
        $path = 'http://mydomain.com/'.$path;
        $max_width = 250;

        if ($width > $max_width) {
            echo '<img src="'.$path.'" alt="'.$filename.'" width="'.$max_width.'" />';
        } else {
            echo '<img src="'.$path.'" alt="'.$filename.'" />';
        }

    }

}

 

Adesso vediamo il codice riga per riga:

  • Con il comando opendir assegnamo alla variabile $pics la risorsa dell’apertura della cartella dove sono contenute le immagini
  • Con il while iniziamo il ciclo che legge il contenuto della cartella e mette il risultato nella variabile $filename
  • Quindi, se il nome del file è diverso da ‘.’ o da ‘..’ procediamo. Questo controllo è necessario per evitare che usi anche come nome file il . o .. che non sono altro che dei collegamenti rapidi che riportano alla cartella corrente e a quella precedente
  • Creiamo una variabile $path che contiene il percorso che abbiamo aperto prima più il nome del file
  • Di questo file prendiamo le misure: larghezza ed altezza e le mettiamo in una lista
  • Poi impostiamo il path completo nel sito (spesso si può evitare, a seconda di come avete impostato l’albero delle direcory)
  • Decidiamo una larghezza massima per visualizzare l’immagine (io ho impostato 250px)
  • A seconda che la larghezza dell’immagine sia maggiore o minore o uguale alla larghezza massima, stamperemo l’immagine con un attributo width = “larghezza massima” (se è più grande) o senza nessun’altro attributo. L’attributo alt è richiesto dallo standard W3C per questioni di accessibilità, ma volendo potete senza problemi evitarlo

Sistemando i CSS sulla classe folder_image potremo quindi ottenere un’insieme di immagini ordinate (come una tabella) o disordinate, distanti più o meno fra di loro, con bordi decorati, etc…
La scelta tocca a voi!

A presto