RSIG

Responsive Simple Image Gallery

Responsive Simple Image Gallery


RSIG è un plugin in grado di produrre una galleria immagini rigorosamente responsive con il classico effetto overlay. Il plugin, per il suo utilizzo, si basa sulla galleria JavaScript PhotoSwipe, e sulle librerie JavaScript Masonry.

Link all'estensione sulla Joomla Extensions Directory.
Link alla documentazione online su GitHub.

 

Due esempi delle possibilità del plugin con il layout Masonry attivato.

Questa prima galleria è composta da foto tutte con risoluzione 800x600px nel formato "landscape", o 600x800px nel formato "portrait".

 

La seconda, invece, ha foto di dimensioni molto diverse.

 

Utilizzo del plugin

RSIG è un plugin che va installato dal backend di Joomla nel modo abituale e poi attivato. I parametri da impostare nelle opzioni del plugin, così come la documentazione sono solo in lingua inglese.

La sintassi per inserire il plugin in un articolo (o in un modulo personalizzato) è quella tipica: {gallery}nomecartella{/gallery}.
Realizzare una prima galleria è quindi davvero elementare: basta inserire la sintassi appena citata indicando il nome della cartella da cui il plugin va a pescare le immagini da visualizzare.
La cartella da cui RSIG carica le immagini è per default una sottocartella di /images, ma nelle opzioni avanzate c'è la possibilità di scegliere una cartella madre diversa da quella predefinita.

 

Le opzioni del plugin

Gallery layout

Tre i possibili layout: Flow, Grid e Masonry.

Thumbnail width e Thumbnail height

Larghezza e altezza delle miniature della galleria. Da ricordare che nel caso del layout Masonry l'altezza delle miniature deve essere posta a "0".

Margin

I margini tra le miniature.

Nota bene: le misure di larghezza e altezza delle thumbnail, così come quella dei margini vanno inserite senza "px", ma solo col valore numerico desiderato.

Overlay captions

Qui si sceglie se mostrare o nascondere le didascalie delle miniature, didascalie che appaiono in overlay con effetto slide dal basso.
Approfondiremo più avanti il funzionamento delle didascalie.

Image pixel density

Qui si deve scegliere se utilizzare immagini con densità pixel standard, o immagini "retina"

Columns in phones
Columns in tablets
Columns in desktops
Columns in large desktops

In queste quattro voci va indicato il numero di colonne della griglia di visualizzazione delle immagini a seconda del dispositivo. Naturalmente queste impostazioni si usano solo col layout "Grid".

Opzioni base

 

Le opzioni "avanzate"

Root folder for image galleries

Come detto prima, per default la cartella madre è /images. Un'opzione sensata in quanto permette di caricare le immagini direttamente da gestione media di Joomla. E' possibile, comunque, impostare una cartella a piacere, anche se poi sarà necessario caricare le immagini per le varie gallerie via ftp.

Thumbnail image quality

Il valore predefinito è 85. I valori consigliati, per avere un buon equilibrio tra qualità e dimensione delle miniature generate dal plugin, vanno da 70 a 90.

Thumbnail cache expiration time

Qui è impostata la durata in minuti della cache delle miniature. Il valore di default è 1440, valore che è consigliato non cambiare.

Memory limit (in MBs)
Library source

Scegliendo l'opzione "Load libraries from CDNs" i due file JavaScript e i due file CSS inerenti a PhotoSwipe verranno caricati da un server esterno, per l'esattezza da https://cdnjs.com/. Se si sceglie l'opzione "Load copies of requiered libraries", i file verranno caricati nel server del nostro sito in un percorso tipo miosito.it/plugins/content/rsig/engines/photoswipe/.
Nelle varie prove che ho fatto per testare il funzionamento di questo plugin, ho sempre riscontrato uno strano e per me inesplicabile comportamento: quando si utilizza il server cdnjs.cloudflare.com. l'overlay della galleria non riesce a passare sopra alla navbar del sito, rendendo necessaria una modifica del CSS di PhotoSwipe per ovviare al problema (si tratta di modificare lo z-index).

Photoswipe options

Le opzioni inerenti a questa voce sono trattate nel dettaglio qui sotto.

 

Opzioni avavnzate

 

Le opzioni Photoswipe nel dettaglio

Come si vede nello screenshot qui sopra, l'unica impostazione presente di default è "shareEl: false", impostazione che esclude il tipico link per la condivisione delle foto. In realtà questa configurazione include una serie di opzioni già attive (per escludere le quali bisognerà agire sui parametri illustati qui sotto), quali la possibilità di visualizzare la galleria a tutto schermo, la presenza delle didascalie e il settaggio a "1" dell'opacità dell'overlay (lo sfondo delle foto apparirà quindi praticamente nero, nascondendo completamente il layer sottostante). Anche i parametri "tapToClose" e "tapToToggleControls" - controlli mirati all'uso sui device con display touch - sono attivati per default.

Le opzioni che troviamo qui sotto sono sommariamente elencate nella documentazione online del plugin, e non c'è alcuna menzione al riguardo nel backend dello stesso.

captionEl: true/false

Questo parametro, impostato per default a "true", dà la possibilità di non mostrare le didascalie delle immagini quando sono visualizzate in overlay. In questo caso, quindi, andrà impostato su "false". Va ricordato che questo parametro riguarda le didascalie che compaiono nelle immagini in overlay, mentre quello già visto nelle opzioni "base" riguarda solon ed esclusivamente le didascalie delle miniature.

fullscreenEl: true/false

Anche la possibilità di visualizzare a tutto schermo le immagini è impostata per default, per cui si utilizzerà solo il parametro "fullscreenEl: false" nel caso si volesse disabilitare tale feature.

shareEl: true/false

Come abbiamo visto prima, tale opzione è impostata per default su "false" per cui va abilitata impostandola su "true". Le opzioni di condivisione riguardano alcuni social network, per la precisione l'immancabile Facebook, Twitter e Pinterest; è presente anche un link per il download dell'immagine visualizzata.

bgOpacity: 0.85

Il parametro setta il grado di opacità (o di traspararenza, se preferite) dell'overlay creato nella visualizzazione in overlay. Se non amate uno sfondo completamente opaco (come impostato di default), basta scegliere un valore inferiore a "1" per regolare a piacimento l'effetto

tapToClose: true/false

Anche questo parametro è impostato di default su "true". Questa opzione - che interessa essenzialmente gli smartphone e i tablet - permette, impostando il valore su "false", di inibire la possibilità di chiudere la galleria in overlay per mezzo del "tap" sul display.

tapToToggleControls: true/false

Come il precedente, anche questo parametro è impostato su "true". Impostandolo su "false" potremo precludere la possibilità di visualizzare e nascondere i controlli della galleria in overlay col "tap" sullo schermo (vale a dire che i controlli saranno sempre visibili).

Link utili

L'estensione sulla JED

Documentazione online su GitHub

Pagina di download su GitHub

La galleria JavaScript PhotoSwipe

La libreria JavaScript Masonry

Cos'è un CDN - Content Delivery Network

 

Link utili

© 2017 Disegnare il Web. Tutti i diritti riservati.

disegnareilweb.cloud non è collegato con joomla.org
tutti i marchi riportati appartengono ai legittimi proprietari

Cookie Policy

Privacy Policy