19 febbraio 2017

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 dynamic gallery
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>




28 commenti:

  1. (y)
    . . . un "mi piace" style facebook... good day...

    RispondiElimina
    Risposte
    1. Grazie per la polliciata virtuale :)

      Elimina
  2. Mi aggiungo anch'io alla "polliciata virtuale" di Antonio Giacci! ;—)

    RispondiElimina
  3. ripropongo in modo più completo...
    Ciao...
    volevo chiedere se quando si visualizza l'immagine in showbox può essere possibile, volendo, aggiungere un link per poter scaricare l'immagine... magari sulla descrizione della foto, visto che è il nome dell'immagine... come fare?
    Grazie per l'attenzione...

    RispondiElimina
    Risposte
    1. Ciao,
      sì, si può fare.

      QUI puoi trovare la parte di codice modificata.
      QUI la demo.

      Per forzare lo scaricamento dell'immagine abbiamo semplicemente inserito l'attributo download la cui compatibilità con tutti i browser è da valutare.

      Elimina
  4. grazie...
    immaginavo si potesse fare in quel pezzo di codice...
    non avevo ben chiara la sintassi da applicare al <a href= .... con tutti quegli escape degli apici...
    un saluto

    RispondiElimina
  5. grazie per questa gallery...mi è mooooolto utile...
    ho solo un piccolo problema, se eseguo upload di un file jpg in cui il nome contiene degli spazi, l'immagine non si visualizza e anche se l'estensione è in maiuscolo (.JPG)


    bye

    RispondiElimina
    Risposte
    1. Ciao, siamo felici che ti sia utile.

      Per quanto riguarda gli spazi nei nomi dei file sarebbe meglio non usarli a prescindere, comunque abbiamo provato a caricare un'immagine con spazi nella demo (ultima immagine) e viene regolarmente visualizzata.
      Per quanto riguarda l'estensione in maiuscolo, invece, devi semplicemente aggiungerla nell'elenco delle estensioni consentite, esempio:

      $imgdir = glob($folder."/*.{jpg,JPG,png,gif}", GLOB_BRACE);

      Elimina
  6. ciao...
    vi ringrazio per la cortesia....
    per le estensioni consentite sono proprio uno stordito, non sono esperto ma ci potevo anche arrivare, per gli spazi dei nomi non è di certo un problema (basta non fare gli spazi).... approfitto della vostra cortesia facendo una domanda, è possibile caricare un video aggiungendo l'estensione appropriata?

    grazie

    RispondiElimina
    Risposte
    1. Ciao,
      sì è possibile ma non basta aggiungere la relativa estensione, devi anche modificare tutto l'output del codice.

      Elimina
  7. Complimenti e grazie come sempre!
    Ho un dubbio: la descrizione della foto se la prende dal nome file?

    RispondiElimina
    Risposte
    1. Ciao,
      sì, come è scritto anche nell'articolo.

      Elimina
  8. Inoltre, come faccio a far inserire le immagini al cliente?
    io avevo pensato di inserire un form allegato, in cui le immagini si inseriscono nella cartella con permessi in file di scrittura, però nella cartella ci sono anche altri file come pdf

    RispondiElimina
    Risposte
    1. Questo non è un problema, visto che lo script ha un filtro per gestire le estensioni.

      Elimina
  9. e i file si devono inviare ad uno ad uno.
    Come faccio ad implementare un form ftp per inviare più file?

    RispondiElimina
    Risposte
    1. Se l'Oggetto Modulo Mail di WebSite non lo consente, dovrai documentarti in Rete.

      Elimina
    2. Grazie delle risposte ma il problema vero è come il cliente li potrebbe eliminare.

      Elimina
  10. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Ciao,
      hai sbagliato la cartella in cui hai allegato il file image.php.
      Come abbiamo scritto nell'articolo, deve andare nella root del sito, mentre adesso si trova nella cartella files: o modifichi il codice PHP o sposti il file.

      Elimina
    2. Grazie Maesi, io pensavo che il file PHP andava messo nella stessa cartella delle immagini, che le ho messo nella cartella allegati.

      Elimina
  11. spettacolo, potrebbe essere wsx5 nativa - ma è andato avanti ... congratulazioni.
    si dispone di un progetto .iwzip - è stato quello di vedere come il codice? così facile guardare, vedere e capire da vicino, con hands-on.

    RispondiElimina
    Risposte
    1. Ciao Reginaldo,
      ci dispiace ma inserire un file di progetto .iwzip ci sembra esagerato.
      Di fatto non aggiungerebbe niente a quanto scritto in questo articolo.

      Elimina
  12. ok estarei desenvolvendo em conjunto.!!!
    Obrigado a atenção.

    RispondiElimina
  13. Buongiorno, ho creato una pagina con il codice da voi proposto e non mi funziona la creazione delle miniature.
    Potete aiutarmi ?
    Grazie
    Domenico

    RispondiElimina
    Risposte
    1. Ciao,
      ti abbiamo risposto alla mail che ci hai inviato.

      Elimina