19 luglio 2014

PHP: immagini random

In questa pillola vedremo come visualizzare in una pagina un numero ben preciso di immagini casuali, che cambiano ad ogni caricamento della pagina.

DEMO

Occorre innanzitutto predisporre una cartella in cui salvare le immagini, tutte con la stessa estensione. Il nome delle immagini dovrebbe essere descrittivo delle stesse, utilizzando un separatore univoco nel caso in cui fosse composto da più parole, poiché esso verrà usato per generare dinamicamente il contenuto del tag alt di ogni immagine.

Iniziamo con il definire le variabili che contengono i valori da personalizzare:
$dir = 'nomecartella';
Nella variabile $dir scriviamo l'indirizzo relativo della cartella che contiene le immagini.
$ext = '.jpg';
Nella variabile $ext indichiamo l'estensione dei file immagine.
$nImg = 4; 
La variabile $nImg definisce il numero delle immagini che devono essere visualizzate in modo dinamico nella pagina .php
$separatore = '_'; 
La variabile $separatore contiene il segno grafico utilizzato come separatore delle parole nei nomi dei file immagine.

Segue il codice PHP che legge il contenuto della cartella, crea un array di nome $img e vi inserisce come elementi tutti i nomi dei file presenti in quella cartella che hanno estensione uguale a quella indicata nella variabile $ext.
$dr = opendir ($dir);
$img = array();
while ($file = readdir ($dr)){
   if (strpos ($file, $ext)){
    $img[]=$file;
    }
}
closedir($dr);

La casualità della scelta dell'immagine da visualizzare è affidata alla funzione rand che genera un numero casuale compreso tra 0 e il valore massimo degli elementi dell'array. Per evitare che lo stesso elemento venga richiamato due volte nella stessa serie di immagini, i numeri generati vengono inseriti in un array $numeri, verificando prima che essi non siano già presenti.
$numeri=array(); 
while(count($numeri)<$nImg)
    {
    $num=rand(0,count($img)-1);
    if (!in_array($num,$numeri)) $numeri[]=$num;
    }
Questi numeri vengono quindi utilizzati per definire quali elementi dell'array $img devono essere stampati nel codice HTML attraverso un ciclo for, che viene eseguito un numero di volte pari al numero impostato nella variabile $nImg:
for ($i=0; $i<$nImg; ++$i){
Ogni immagine è dotata di un tag alt che contiene il testo alternativo dell'immagine. Il valore di questo tag si ottiene sostituendo, nel nome del file immagine senza estensione,  il carattere utilizzato come separatore ($separatore) con uno spazio:

 $nomeuno=str_replace($ext,'',$img[$numeri[$i]]); 
$nome=str_replace($separatore, ' ', $nomeuno);    
Il codice HTML generato è molto semplice: un div con classe gallery_thumbs contiene le immagini con classe thumbs; ad entrambe le classi può essere assegnata una formattazione a piacere tramite CSS.
<img class="thumbs" src="<?php echo $dir; ?>/<?php echo $img[$numeri[$i]]; ?>" alt="<?php echo $nome ?>" />


Ecco il codice completo:

<?php
$dir = 'nomecartella';
$ext = '.jpg';
$nImg = 4;
$separatore = '_';

$dr = opendir ($dir);
$img = array();
while ($file = readdir ($dr)){
   if (strpos ($file, $ext)){
    $img[]=$file;
    }
}
closedir($dr);

?>
<div class="gallery_thumbs">
    <?php
    $numeri=array();
    while(count($numeri)<$nImg) 
    {
    $num=rand(0,count($img)-1); 
    if (!in_array($num,$numeri)) $numeri[]=$num;
    }
    for ($i=0; $i<$nImg; ++$i){
      $nomeuno=str_replace($ext,'',$img[$numeri[$i]]); 
      $nome=str_replace($separatore, ' ', $nomeuno);
    ?>     
        <img class="thumbs" src="<?php echo $dir; ?>/<?php echo $img[$numeri[$i]]; ?>" alt="<?php echo $nome ?>" />
        <?php } ?></div>


5 commenti:

  1. Grazie il codice mi servirebbe ma non riesco ad aggiungere un link sulle foto che mi rimandi ad una gallery, mi potresti suggerire

    RispondiElimina
    Risposte
    1. Ciao Serpe76,
      se devi aggiungere lo stesso link a tutte le immagini puoi semplicemente avvolgere il tag img con il tag a

      Se non abbiamo capito, prova a spiegarti meglio.

      Elimina
  2. Grazie ho risolto, ma ho un altro problema settato 4 immagini da visualizzare e il random pesca sempre le stesse immagini piu' o meno 16 a fronte delle 50 nella cartella

    RispondiElimina
    Risposte
    1. Ciao,
      lo script considera tutti i file con l'estensione indicata nella variabile $ext presenti nella cartella.
      Puoi verificarlo in questo test (50 immagini).
      Verifica se le tue immagini hanno tutte la stessa estensione.

      Elimina