Visualizzare i dati inviati al database dal form mail di WebSite X5: immagine in showbox

Negli articoli precedenti abbiamo visto come visualizzare i dati inseriti in un database con il form mail di WebSite X5 e come aggiungere una paginazione. In questo articolo ci occuperemo delle immagini presenti in ogni news, aggiungendo il valore dell'attributo alt e la visualizzazione dell'immagine ingrandita attraverso il codice dello showbox generato dal programma. Qui presenteremo quindi solo le modifiche da apportare al codice precedentemente presentato.

Ecco la nostra demo:

DEMO

Innanzitutto dobbiamo modificare l'Oggetto Modulo Invio E-mail utilizzato per inserire i dati nel database, aggiungendo due campi, uno per il testo alternativo (attributo alt) e uno per la descrizione dell'immagine ingrandita in showbox.

Non dimentichiamoci di cambiare, nella scheda Opzioni, i nomi dei campi corrispondenti del database (nel nostro esempio li abbiamo chiamati rispettivamente alt e descimg).

La parte più corposa della modifica riguarda il codice inserito nell'Oggetto Codice HTML della pagina in cui si visualizzano le news:

1. All'inizio del codice, dove abbiamo definito le variabili  DA PERSONALIZZARE, aggiungiamo le due nuove variabili che identificano rispettivamente il nome del campo del database che contiene l'attributo alt dell'immagine ($qalt) e il nome del campo del database che contiene la descrizione dell'immagine ($qdescimg):
   

   //VARIABILI IMMAGINI SHOWBOX
       
      //Nome del campo del database con il testo alternativo
      $qalt     = 'alt'; 
   
      //Nome del campo del database con la descrizione dell'immagine
      $qdescimg = 'descimg';
   

2.   Modificare il codice dell'OUTPUT solo nella parte che riguarda l'immagine da così:
   

     if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
               echo '<img alt="" src="' . $qfolder . '/' . $val[$qimmagine] . '" />';
           }
   

   a così:
   

   if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
       
       //Percorso/nome file immagine
       $qfileimg     = $qfolder . '/' . $val[$qimmagine];
   
       //Dimensioni immagine
       $qfileimgsize = getimagesize($qfileimg);
   
       //Attributo alt
       if (isset($val[$qalt]) && $val[$qalt] != '') {
           $qfileimgalt = $val[$qalt];
       } else {
           $qfileimginfo = pathinfo($qfileimg);
           $qfileimgalt  = preg_replace('/_\d+/', '', $qfileimginfo['filename']);
       }
   
       //Descrizione immagine ingrandita
       if (isset($val[$qdescimg]) && $val[$qdescimg] != '')
           $qfiledescimg = $val[$qdescimg];
       else
           $qfiledescimg = '';
   
       //Output codice HTML immagine
       echo '<a href="' . $qfileimg . '" onclick="return x5engine.imShowBox({ swipeImg: \'res/imSwipe.png\', closeImg: \'res/imClose.png\', loadingImg: \'res/imLoad.gif\', startIndex: 0, media:[{type: \'image\', url: \'' . $qfileimg . '\', width: ' . $qfileimgsize[0] . ', height: ' . $qfileimgsize[1] . ', description: \'' . $qfiledescimg . '\'}]}, 0, this);" title="Clicca per ingrandire"><img alt="' . $qfileimgalt . '" src="' . $qfileimg . '" /></a>';
   }
   

Il codice controlla l'esistenza di un valore nel campo alt del database; se non viene inserito niente, verrà comunque utilizzato come valore il nome del file immagine privo di estensione.
Anche per la descrizione utilizzata nell'immagine ingrandita dello showbox, viene controllata l'esistenza di un valore nel rispettivo campo e, se non è presente, viene lasciata vuota.
Nell'output è stato inserito l'attributo onclick che richiama la funzione imShowBox del programma: le dimensioni massime dell'immagine ingrandita sono ottenute dinamicamente leggendo le dimensioni reali di ogni file immagine.

Avvertenza: il programma, al momento dell'upload di un file attraverso il form mail, aggiunge al nome del file caricato sul server un suffisso numerico preceduto dal carattere underscore ( _  ). Nel nostro codice, per riottenere il nome del file immagine originale da utilizzare per l'attributo alt, abbiamo fatto ricorso alla funzione preg_replace() che, attraverso un'espressione regolare, cerca questo suffisso e lo rimuove.
Si consiglia quindi di non utilizzare il carattere underscore seguito da numeri nel nome del file.