">Docs Tutorials

In questo tutorial vedremo come creare galleria di immagini. Le immagini verranno gestite tramite la Media Library di wordpress.
La struttura sarà composta da due tabelle. La prima tabella avrà l'elenco delle gallerie di immagini avrà titolo e descrizione.
La seconda tabella avrà invece l'elenco delle immagini per ogni galleria e le colonne saranno: immagine, titolo e il riferimento alla galleria a cui appartengono.

Iniziamo creando un nuovo elenco

Clicchiamo sul plugin ADMIN FORM e poi sul bottone "CREATE NEW FORM". Come nome scriviamo Gallery images e lasciamo "create a new Table". Premiamo quindi il bottone salva.

Una volta salvata la lista verrete rediretti nel TAB FORM.
Clicchiamo sul bottone new field così da aggiungere una nuova colonna.
Nei parametri inseriamo: NEW FIELD NAME: image_id
Field Type: Media gallery
Required: yes

Frontend

Copiamo lo shortcode per la visualizzazione della galleria. Questo può essere trovato in alto a destra sulle pagine di configurazione oppure tornando alla pagina principale del plugin nella colonna shortcode. Copiamo lo shortcode e associamolo ad un articolo.

La visualizzazione è in formato tabella, ora trasformiamola in una galleria di immagini

Torniamo in amministrazione, dentro il plugin nel TAB FRONTEND. Su List type selezioniamo custom invece che table

Sulla sezione Header scrivamo:

<div class="dbp-gallery-columns">

Su Loop the data scriviamo

Da notare che per visualizzare il popup con l'immagine utilizzeremo il sistema integrato dei dettagli. Per richiamare il popup il aggiungere al link la classe js-dbp-popup e come link ci basterà richiamare la funzione del template engine [^LINK_DETAIL].

Sul Footer ci basterà chiudere il div che abbiamo aperto per ordinare le immagini

Su Detail view Possiamo impostare vari tipi di popup su popup_style, base, large o fit. Fit ci permette di avere una finestra che si adatterà alle dimensioni del contenuto. Scegliamo su Popup type FIT

Su View type scegliamo CUSTOM e all'interno dell'editor richiamiamo l'immagine grande richiedendo come dimensioni che si adatti alla finestra (winfit). Nella documentazione sono descritte le varie opzioni di image_size. Da notare che non possiamo usare la colonna image che nativamente avrebbe contenuto l'id dell'immagine perché dentro list view setting abbiamo impostato image come media gallery per cui la colonna restituisce la miniatura in html e non l'id della galleria di immagini.

Infine all'interno del css del proprio template bisogna aggiungere:

.dbp-gallery-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; grid-gap: 2px; line-height: 0;}
.dbp-gallery-columns > a { border: 1px solid; line-height: 0; padding:.5rem; height: 100%; box-sizing: border-box; display: flex; align-items: center;}

Il risultato finale mostrerà una serie di immagini cliccabili simili all'immagine sottostante.