8 aprile 2017

Unite Gallery, una manciata di database e WebSite X5 q.b.

Questa volta, dalla cucina è uscito un mix delle nostre esperienze precedenti: invio e lettura dei dati al database, generazione dinamica di una galleria immagini a cui abbiamo abbinato un plugin veramente versatile, ricco di effetti tutti rigorosamente responsive: Unite Gallery.

Rispetto all'articolo precedente, in cui abbiamo visto come leggere dinamicamente le immagini contenute in una cartella, senza occuparci di come queste vengono caricate sul server, in questo articolo vedremo come rendere il tutto più semplice, anche per un utente poco esperto, prevedendo il caricamento delle immagini attraverso l'Oggetto Modulo Invio E-mail di WebSite X5 e la gestione delle stesse attraverso l'Oggetto opzionale DataBase Viewer.

Ecco la nostra demo:

demo unite gallery su db
DEMO

Vediamo ora come procedere:

Plugin Unite Gallery


Scarichiamo dal sito dell'autore i file del plugin Unite Gallery e, dopo aver estratto il file .zip, creiamo sul server una cartella che chiameremo unite-gallery e carichiamo in essa il contenuto della cartella dist del file estratto. In questo modo avremo a disposizione tutti i temi che il plugin prevede, con le relative risorse.


Nella nostra demo abbiamo provato tre tipi di gallerie: Tiles Justified, Grid Theme e Carousel. Ogni tipo di galleria richiede l'inclusione del file JavaScript unitegallery.js (o nella versione compatta unitegallery.min.js) e del file CSS unite-gallery.css che costituiscono "il motore" del plugin, più altri file .css e .js che dipendono dal tema scelto.

Quando avremo scelto il tema da utilizzare potremo anche cancellare dal server i file non necessari.

Gestione dati


Al Passo 1, Impostazioni Avanzate, Gestione Dati inseriamo i dati di accesso al database forniti dal nostro provider. Indichiamo anche il nome della Cartella su Server con accesso in scrittura poiché qui verranno salvate le immagini che invieremo sul server con il modulo e-mail.

Pagina inserimento e gestione delle immagini


Il form che noi abbiamo preparato prevede, oltre al campo per l'inserimento dell'immagine, alcune opzioni:
  • la possibilità di associare ad ogni immagine una descrizione che verrà visualizzata nell'immagine ingrandita oppure, in alternativa, la possibilità di scegliere come descrizione il nome del file dell'immagine. La descrizione, comunque inserita, varrà anche come valore dell'attributo alt. Qualora nessun campo venisse compilato la descrizione dell'immagine ingrandita e l'attributo alt resteranno vuoti;
  • la possibilità di associare un ulteriore collegamento sull'immagine, oltre a quello all'immagine ingrandita.
Impostiamo quindi nel progetto una pagina protetta ed inseriamo in essa un Oggetto Modulo Invio E-mail.
Nella scheda Elenco inseriamo i campi necessari, come da immagine:


E' importante, oltre al tipo di campi presenti, definire anche, nella scheda Opzioni di ciascun campo, i valori di Attributo <name> e Nome del Campo del Database, valori che verranno utilizzati sia nel codice PHP per la visualizzazione finale delle immagini che nel codice JavaScript (vedremo questo più avanti) che si occupa di mostrare/nascondere il campo relativo alla descrizione in base all'opzione scelta.









Nella scheda Invio come metodo di Invio dei dati scegliamo dal menu a tendina Invia i dati ad un database, valorizzando tutti i campi necessari: il database (nel menu a tendina compare il database precedentemente impostato in Gestione Dati), il nome della tabella in cui verranno memorizzati i dati e l'eventuale indirizzo e-mail a cui verrà notificato ogni nuovo inserimento.

Inseriamo quindi anche l'oggetto opzionale Database Viewer da utilizzare per la modifica dei dati inseriti attraverso il modulo e-mail, impostando i parametri necessari. Nel caso in cui questa pagina venga realizzata per essere utilizzata da un utente poco esperto, si può impedire l'aggiunta di un nuovo record, funzione superflua dal momento che c'è il modulo e-mail che svolge questo compito, con questo CSS che nasconde il relativo controllo, da inserire in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD:

<style>
.jtable-toolbar-item-add-record {
  display: none !important;
}
</style> 

Sempre in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD, inseriamo questo codice JavaScript che permette di mostrare/nascondere, nel form, il campo "Descrizione" in base alla scelta effettuata nel campo precedente:

<script>
$(document).ready(function () {
    $("input[name='checkdesc[]']").change(function () {
         if ($(this).is(":checked")) { 
       $("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'none');
       $("textarea[name='descrizione']").val('');
    } else {
         $("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'inline');
    }
   });
   $('input:reset').click(function () {
        $("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'inline');
    })
});
</script> 

Ovviamente se decidiamo di cambiare il valore dell'attributo name dei campi interessati, dovremo modificare il codice.

QUI è visibile un duplicato della nostra pagina di gestione che, per ovvi motivi, è stata modificata in modo che sia non funzionante.


Pagina visualizzazione gallery


Nella pagina dove vogliamo visualizzare le immagini, inseriamo un Oggetto Codice HTML impostando l'altezza dello stesso a 0 (zero) ed inseriamo questo codice:
<!-- ===============================================
Unite Gallery by Max Valiano http://unitegallery.net
Database class: by Incomedia Srl https://www.incomedia.eu  
PHP code  by https://quellidelcucuzzolo.blogspot.it
Please do not remove credit  
================================================ -->
<div id="UniteGallery" style="display:none;">
<?php

//DA PERSONALIZZARE

//Inserire il nome della tabella del database
$qtable = "ugallery";

//Inserire i nomi dei campi del database
$qimmagine = 'immagine';    //campo File Allegato
$qcheck    = 'checkdesc';   //campo Scelta Multipla
$qdesc     = 'descrizione'; //campo Area di Testo
$qlink     = 'link';        //campo Testo

//Inserire l'altezza massima delle miniature
$thumbsH = 300;

//CONNESSIONE

//Prelievo automatico dei dati inseriti nel programma
$qchiave   = array_keys($imSettings['databases']);
$qdati     = getDbData($qchiave[0]);
$qhost     = $qdati['host'];
$quser     = $qdati['user'];
$qpassword = $qdati['password'];
$qdatabase = $qdati['database'];
$qfolder   = $imSettings['general']['public_folder'];
$qdb       = new ImDb($qhost, $quser, $qpassword, $qdatabase);
if (!$qdb->testConnection())
    die("Connessione non riuscita");

//SELECT

//Selezione di tutti i record della tabella
$qitem = $qdb->query("SELECT * FROM $qtable");

//OUTPUT

$urlfile = dirname($_SERVER['PHP_SELF']);
//Iterazione dell'array e creazione della struttura HTML
if ($qitem) {
    $qitem = array_reverse($qitem);
    foreach ($qitem as $val) { 
        if (isset($val[$qdesc]) && $val[$qdesc] != '')
            $qdescimg = $val[$qdesc];
        else if (isset($val[$qcheck]) && $val[$qcheck] != '') {
            $qdescimg = preg_replace('/_\d+/', '', $val[$qimmagine]);
        } else
            $qdescimg = "";
        if (isset($val[$qlink]) && $val[$qlink] != '') {
            echo '<a href="' . $val[$qlink] . '">' . "\n";
        }
        if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
            echo '<img src="image.php?height=' . $thumbsH .'&image=' . $urlfile . '/' . $qfolder . '/' . $val[$qimmagine] . '" data-image="' . $qfolder . '/' . $val[$qimmagine] . '" alt="' . $qdescimg . '" />' . "\n";
        }
        if (isset($val[$qlink]) && $val[$qlink] != '') {
            echo '</a>' . "\n";
        }
    }
}

//CHIUSURA DELLA CONNESSIONE

$qdb->closeConnection();
?>
</div>
<!-- richiamo funzione Unite Gallery e impostazione stile -->
<script>
jQuery("#UniteGallery").unitegallery({
  tiles_type: "justified",
  tile_show_link_icon: true,
  lightbox_overlay_opacity: 0.95
});
</script>
<!-- Unite Gallery END -->

Le variabili da personalizzare sono quelle indicate all'inizio del codice.
Il richiamo della funzione Unite Gallery, alla fine del codice, dovrà essere personalizzato in base al tema scelto e alle opzioni che si intendono utilizzare e per questo si rimanda al sito dell'autore.

Per la generazione automatica delle miniature, abbiamo utilizzato anche questa volta lo script Smart Image Resize, versione di luciorota: scarichiamo da QUI il file .zip, scompattiamolo e carichiamo nella root del server il file image.php  con un programma FTP o allegandolo nella scheda Esperto dell'Oggetto Codice HTML stesso, lasciando vuoto il campo Percorso relativo sul Server.
Ricordiamo che questo script richiede che sul server siano abilitate le librerie GD.

In Proprietà Pagina, Esperto, impostiamo php come estensione del file generato. Sempre in questa scheda, inseriamo il seguente codice personalizzato Prima dell'apertura del tag HTML:
<?php
require_once("res/x5engine.php");
?>

Inoltre, Prima della chiusura del tag HEAD, inseriamo i richiami ai file JavaScript e CSS del plugin Unite Gallery, file che cambiano in funzione del tema scelto.
Ad esempio, per la galleria Tiles Justified, inseriamo questo codice:

<link rel="stylesheet" href="unite-gallery/css/unite-gallery.css" type="text/css" />
<script type="text/javascript" src="unite-gallery/js/unitegallery.min.js"></script> 
<script type="text/javascript" src="unite-gallery/themes/tiles/ug-theme-tiles.js"></script>

Ovviamente la galleria sarà visibile solo online. Se si vuole scrivere un avviso sulla pagina dell'anteprima è possibile inserire anche questo script:

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


Buon appetito... sperando che non facciate indigestione :)


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>