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

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 :)