Creare una galleria dinamica per WebSite X5

WebSite X5 prevede un Oggetto Galleria con la possibilità di scegliere tra diverse tipologie: in presenza di numerose immagini, però, il progetto può diventare corposo e di difficile gestione.
In questo articolo presenteremo uno script PHP che ci permette di leggere dinamicamente le immagini direttamente da una cartella sul server e di visualizzarle come miniature con ingrandimento nello ShowBox di WebSite X5: in questo modo ci basterà aggiungere o rimuovere le immagini sul server per aggiornare automaticamente la pagina, senza bisogno di aprire il programma.
Di fatto abbiamo rimesso mano ad un codice PHP che avevamo descritto in questo post e lo abbiamo integrato con il codice JavaScript della Galleria Miniature del programma.

Ecco la nostra demo:

DEMO

Vediamo ora come procedere:

CREAZIONE CARTELLA E CARICAMENTO IMMAGINI

Creiamo sul server una cartella in cui esporteremo le nostre immagini. Possiamo utilizzare il pannello di controllo online che ogni web hosting offre, un programma FTP tipo FileZilla o possiamo utilizzare il programma stesso al Passo 5, Esporta i file su Internet e, a connessione avvenuta, cliccare nella barra degli strumenti sull'icona    per creare una nuova cartella e sull'icona  per caricare le immagini sul server.

Nota bene: lo script visualizzerà automaticamente nella descrizione dell'immagine ingrandita il nome del file immagine, sostituendo con uno spazio l'eventuale trattino (-) presente. Per quanto riguarda le estensioni, lo script riconosce file con estensione .jpg, .png e .gif, ma eventualmente è possibile anche modificare questi filtri.

INSERIMENTO SCRIPT

Scarichiamo da QUI il file image.php che servirà per la gestione delle miniature (Smart Image Resize, versione di luciorota). Questo script permette di creare automaticamente le miniature a partire dalle immagini originali: noi abbiamo scelto di impostare la creazione di miniature quadrate, ma lo script prevede anche altre opzioni, per le quali occorre documentarsi sul sito dell'autore. Per il suo funzionamento è necessario che sul server siano abilitate le librerie GD.

Nella pagina in cui vogliamo visualizzare la gallery impostiamo l'estensione .php da Proprietà Pagina, Esperto, Estensione del file generato. Inseriamo un Oggetto Codice HTML, impostiamo l'altezza a 0 ed alleghiamo il file image.php appena scaricato nella scheda Esperto, lasciando vuoto il campo Percorso relativo sul Server: in questo modo il file verrà caricato nella root del server.

Copiamo e incolliamo quindi nella scheda Codice HTML questo script:

<!-- ==================================================================
Dynamic Gallery
PHP code by quellidelcucuzzolo.blogspot.com 
JS code by Incomedia
Please do not remove credit
=================================================================== -->
<div id="ms-gallery">
   <script> 
      var showbox_MS_Gallery= {
      media: [ 
      <?php
         //DA PERSONALIZZARE:
         $folder = "ms-gallery"; //cartella sul server in cui sono contenute le immagini
         $effect = 2;            //numero corrispondente all'effetto di transizione scelto
         $sizethumbs = 150;      //larghezza delle miniature quadrate
         
         $effects = array(
         "none",
         "random",
         "fade",
         "horizontalSlide",
         "verticalSlide",
         "horizontalSlideSwing",
         "verticalSlideSwing",
         "zoom",
         "elasticFromTop",
         "elasticFromBottom",
         "elasticFromLeft",
         "elasticFromRight",
         "bounceFromTop",
         "bounceFromBottom",
         "bounceFromRight",
         "bounceFromLeft",
         "rotateLinear",
         "rotateZoom",
         "carousel",
         "verticalSlices",
         "scramble",
         "squares",
         "flip"
         );
         $imgdir  = glob($folder."/*.{jpg,png,gif}", GLOB_BRACE);
         foreach ($imgdir as $key => $filename) {
         $imgsize  = getimagesize($filename);
         $nomefile = pathinfo(basename($filename));
         echo '{type: "image", url: "' . $filename . '", width: ' . $imgsize[0] . ', height: ' . $imgsize[1] . ', description: "' . str_replace('-', ' ', $nomefile['filename']) . '", "effect": "' . $effects[$effect] . '"}';
         if ($key < sizeof($imgdir)-1)
         echo ',';
         }
         ?> 
      ]};
   </script> 
   <?php
      foreach ($imgdir as $key => $filename) {
          $nomefile = pathinfo(basename($filename));
          $urlfile  = dirname($_SERVER['PHP_SELF']);
          echo "<a href='$filename' onclick='return x5engine.imShowBox(showbox_MS_Gallery, $key, this);'><img class='ms-gallery' src='image.php?width=$sizethumbs&height=$sizethumbs&cropratio=1:1&image=$urlfile/$filename' alt='" . str_replace('-', ' ', $nomefile['filename']) . "' /></a>";
      }
      ?>
</div>
<!-- end Dynamic Gallery -->

Le variabili da personalizzare sono:

• $folder = "ms-gallery";
  inserire il nome della cartella in cui sono state caricate le immagini

• $effect = 2;
  il numero (da 0 a 22) indicato in questa variabile definisce il tipo di transizione che avranno le immagini ingrandite nello ShowBox. Per avere un'idea degli effetti disponibili basta inserire temporaneamente nel progetto un Oggetto Galleria, Tipo Miniature, inserire un'immagine nella Scheda Elenco e visualizzare nelle Opzioni le varie possibilità ed il numero ad esse associato
  
  
  
  
  

• $sizethumbs = 150;
  il valore inserito in questa variabile definisce la larghezza delle miniature quadrate che il file image.php creerà automaticamente. 

DEFINIZIONE STILI

Possiamo definire da programma lo stile grafico dello ShowBox al Passo 2, Personalizzazione, ShowBox, Tooltip e E-mail.
Per quanto riguarda le miniature dobbiamo aggiungere qualche riga di CSS: nel nostro esempio abbiamo definito un semplice bordo grigio e abbiamo distanziato tra loro le miniature impostando padding e margin, ma il codice è completamente personalizzabile.
Inserire quindi questa regola nella scheda Esperto, Codice CSS sempre dello stesso Oggetto HTML:

img.ms-gallery{
    padding: 20px;
    border: 1px solid gray;
    margin: 4px;
 }

Ovviamente in Anteprima la gallery non sarà visibile. Se vogliamo tenere "pulita" la pagina, evitando di visualizzare parti di codice, possiamo inserire questo script in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD:

<script>
$(document).ready(function() {
  // funzionalità offline
  if (location.host == "127.0.0.1:8080")
    $("#ms-gallery").html("La gallery si visualizzerà solo quando il sito verrà esportato su Internet");
});
</script>