Supporto volontario e collaborativo per Joomla!® in italiano

SIGE: inserire "al volo" una galleria di immagini in un articolo

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Logo del plugin SIGESIGE – Simple Image Gallery Extended – è un plugin di tipo content che permette la visualizzazione di una galleria di immagini in un articolo di Joomla!.
Se lo accompagniamo con il plugin SIGE - Simple Image Gallery Extended - Editor Button inseriamo nell'editor il pulsante SIGE Parameters che ci consente di configurare "al volo", e facilmente, i parametri per SIGE.
Inserimento del TokenÈ possibile scaricare i due plugin dal sito dello sviluppatore Viktor Vogel, senza necessità di registrarsi, ed installarli nel modo consueto dal menu Estensioni/Gestione estensioni; di default i due plugin sono disabilitati per cui vanno resi attivi dal menu Estensioni/Gestione plugin, con un accorgimento in più per il secondo: per motivi di sicurezza, onde evitare che qualcuno acceda al file dall'esterno e legga la struttura delle cartelle del server al di fuori del plugin, richiede (obbligatoriamente) di impostare un token; apriamolo ed immettiamo una stringa di sicurezza formata da lettere, numeri e simboli anche in maniera casuale, tanto non è necessario memorizzarla.

Il plugin SIGE è già configurato all'installazione, ma sicuramente andrà personalizzato aprendo il pannello di controllo a schede dal menu Estensioni/Gestione Plugin/Content - Simple Image Gallery Extended .

Per inserire una galleria in un articolo è necessario che le immagini vengano caricate in una cartella, preferibilmente all'interno della directory images. Si possono poi seguire due diverse procedure:
Modalità di inserimento al volo

  1. Cliccare sul pulsante SIGE Parameters. Nella finestra che si aprirà effettuare, dal menu a discesa, la sola scelta della cartella contenente le immagini: il tasto Insert immetterà automaticamente nell'area di testo il codice
    {gallery}cartella_contenente_le_immagini{/gallery}
    e saranno applicati alla galleria i parametri globali così come configurati nel plugin.

  2. In alternativa dopo aver cliccato sul pulsante SIGE Parameters, nella finestra che si aprirà, oltre a scegliere la cartella contenente le immagini, si configurano alcuni parametri per impostazioni diverse da quelle fatte nel pannello del plugin: questa volta con il tasto Insert  verrà inserito nell'area di testo il codice contenente anche le nuove impostazioni da imporre ai parametri, separate con una virgola. L'ordine non è importante, purché compaia per prima la directory delle immagini.
    Ad esempio
    {gallery}paesaggi,width=300{/gallery}
    perché la galleria attinga le immagini dalla cartella "paesaggi" e la larghezza massima delle miniature sia di 300 pixel; tutti gli altri parametri seguono quanto configurato in SIGE.
Evidentemente conviene impostare opportunamente i valori di default dei parametri ed eventualmente apportare modifiche contestuali. Le configurazioni generali le facciamo nel pannello amministrativo di SIGE, le modifiche dei parametri per la singola galleria le facciamo "al volo" nell'articolo, per gli altri "Don't use" riconferma i valori di default (basta non toccarli!).

Un valido aiuto ci viene fornito dai tooltip che compaiono quando passiamo con il mouse sulle varie voci; di seguito le più utili così come compaiono nel pannello amministrativo con tra parentesi, in corsivo, i parametri corrispondenti.

Settings: Gallery

Pannello amministrativo del plugin SIGEThumbnail storage (thumbs): salvare le miniature dopo averle generate, rendendo così più veloce un successivo caricamento? Scegliendo sì, le miniature saranno salvate in una subdirectory, di nome thumbs, nella stessa cartella contenente le immagini della galleria (=funzionalità cache). Questo aumenta considerevolmente la velocità di caricamento della galleria ma occupa spazio sul server.

Overwrite Thumbnails: Attivando questa opzione, quando verranno generate nuovamente le miniature quest'ultime sovrascriveranno le precedenti. Può essere utile ad esempio se, con la configurazione al volo, cerchiamo le loro dimensioni ottimali; dopo di che conviene disattivare tale opzione per non fare lavorare inutimente il server.

In pratica, una volta trovati al volo i parametri ottimali, attiviamone la memorizzazione mediante Thumbnail storage: sarà effettuata alla prima visualizzazione dal frontend; fatto ciò disattiviamo poi l'opzione per non generare le miniature ad ogni caricamento.
Se dopo la memorizzazione apportiamo nuovamente modifiche alle miniature, occorre sovrascrivere la cartella thumbs per cui bisogna attivare contemporaneamente Thumbnail storage e Overwrite Thumbnails. Ricordarsi poi di disattivarle!

Root directory (root): no se la cartella contenente le immagini si trova in images, se invece è altrove: in questo caso va indicato il percorso a partire dalla directory principale.

Vertical gap, Horizontal gap (gap_v, gap_h): distanza in pixel fra le miniature.

Image sorting (sort): l'ordine delle immagini può essere casuale, alfabetico, secondo la data di modifica, secondo l'ordine in cui compaiono in un file di informazioni.
Se si opta per quest'ultima configurazione è necessario creare all'interno della cartella delle immagini il documento di testo captions.txt che riporti per ogni immagine una riga contenente nome esatto del file-immagine, comprensivo dell'estensione, il titolo dell'immagine e poi (opzionalmente) la descrizione: queste informazioni vanno separate da un "|".
Inoltre è necessario attivare "Information from textfile (fileinfo)" nella scheda Settings: JS View.
In un sito multilingua è necessario preparare diversi file di informazioni che nel nome riportino il codice di lingua, come ad esempio captions-de-DE.txt per la lingua tedesca, captions-en-GB.txt per la lingua inglese.
Le immagini per le quali non vi sono informazioni nel file di testo non verranno rappresentate nella galleria.

Select JS view: tale opzione è di carattere generale e non contestuale alla singola galleria; permette la scelta del tipo di presentazione delle immagini.

Load JS files: Va selezionato il file in base al tipo di presentazione scelta. Se il file è già incluso selezionare "No".

Limit number of images (limit): sì per limitare il numero delle miniature a quanto indicato nella casella seguente.

Number of shown images (limit_quantity): viene preso in considerazione solo se il parametro precedente è posto sul sì. La limitazione è solo per il numero di diapositive, nella slideshow vengono mostrate tutte le immagini della galleria.

Line break after number of images (column_quantity): indicare dopo quante immagini deve andare comunque ad una nuova riga; lasciare vuoto se non ci si vuole servire di questa opportunità.

CSS Image Tooltip (css_image): l'immagine viene mostrata in un tooltip quando passiamo il mouse sulla miniatura.

Half size in the tooltip (css_image_half): se CSS Image Tooltip è attivato, con questa opzione viene mostrata metà dell'immagine originale.

Gallery without JS-effect (noslim): per disattivare l'effetto lightbox.

Show images as a list (list): per mostrare una lista delle immagini e non le loro miniature.

Caption (caption): per mostrare la didascalia della miniatura; verrà mostrato il nome dei file (senza l'estensione) per cui è buona norma avere cura della loro denominazione.

Set a link (image_link): alle miniature può essere associato un collegamento nella forma www.nomeadominio.xx; gli effetti lightbox e tooltip vengono disabilitati.

Open link in new window (image_link_new): apertura del collegamento nella stessa finestra o in una nuova.

Settings: Thumbnail

Image thumbnail width, Image thumbnail height (width, height): le massime dimensioni delle miniature.

Keep aspect ratio (ratio): sì per rappresentare le miniature mantenendo il rapporto fra le dimensioni dell'immagine originaria.

Maximum size of thumbs (Info) (calcmaxthumbsize): calcola la massima dimensione per le miniature; per far ciò deve analizzare tutte le immagini della galleria per cui il tempo di calcolo aumenta con il numero delle immagini; se tale numero è alto conviene impostare manualmente Image thumbnail width, Image thumbnail height.

Image thumbnail quality (jpg) (quality): regolare la qualità delle miniature create da una immagine jpg con un valore da 0 a 100, dove 100 è la migliore possibile; consigliati valori fra 70 e 80.

Image thumbnail quality (png) (quality_png): regolare il livello di compressione con un valore da 0 (assente) a 9 (massima); 6 è il valore consigliato.

Detail for thumbnail (thumbdetail): nella miniatura deve essere rappresentata l'intera immagine o una sua parte? Le configurazioni possibili sono intera, superiore destra, superiore sinistra, inferiore destra, inferiore sinistra.
Questa opzione non è compatibile con l'opzione crop.

Use crop (crop): effetto RITAGLIO dell'immagine, secondo il fattore indicato di seguito, senza influire sulle dimensioni delle diapositive, per cui si ha un gradevole effetto Zoom; utile quando si uniformano le dimensioni delle miniature (disattivando Keep aspect ratio).

Set crop-factor (crop_factor): fattore di ritaglio espresso in percentuale; i valori da immettere vanno a 1 a 99 senza il simbolo %.

Settings: Original image

Resize images (resize_images): Attivando tale opzione le dimensioni delle immagini originali vengono modificate secondo la configurazione dei restanti parametri di questa sezione. All'interno della cartella delle immagini viene creata la subdirectory "resizedimages" contenente le immagini ridimensionate. Se le immagini sono molte o di grandi dimensioni, conviene ridimensionarle già prima di caricarle.

Reset resized images (images_new): se abbiamo ridimensionato le immagini e vogliamo ridimensionarle nuovamente, proprio perché è stata creata la cartella "resizedimages" dobbiamo consentire la sovrascrittura delle immagini ridimensionate. Allorché le immagini avranno le dimensioni desiderate bisogna disattivare tale opzione.

Width of the images (width_image), Height of the images (height_image): le nuove dimensioni delle immagini che vengono generate dalle originali; se viene attivata l'opzione "Keep aspect ratio", allora esse rappresentano le dimensioni massime nel rispetto delle proporzioni.

Keep aspect ratio (ratio_image): per mantenere le proporzioni fra le dimensioni dell'immagine originale.

Settings: JS View

Show image information (image_info): mostra il nome dell'immagine o informazioni dal file di testo captions.txt (se è attivato Information from text file).

Information from text file (Info) (fileinfo): mostrare o meno le informazioni riportate nel file captions.txt.

Show download button (download): nel mostrare l'immagine permette il suo download, mediante la piccola icona di un dischetto.

Print option in JS view (print): mediante una piccola icona permette la stampa nel lightbox.

Navigation tip (displaynavtip): pubblicare un suggerimento per la navigazione nei slideshow?
Il messaggio va inserito nel campo seguente.

Navigation tip message: quanto inserito in questo campo viene preso o meno in considerazione in dipendenza della scelta precedente.

Display the content item's title (displayarticle): per inserire il titolo dell'articolo nelle informazioni riportate sotto le immagini.

Message in front of title: eventuale messaggio da anteporre alle informazioni precedenti.

Settings: Watermark

Watermark (watermark): apporre una filigrana sulle immagini?
L'immagine della filigrana, va posta nella cartella plugins/content/plugin_sige con la denominazione watermark.png.
È possibile richiamare la filigrana da un file diverso, sempre posizionato nella cartella plugins/content/plugin_sige, mediante il parametro watermarkimage, con Sige Parameters; ad esempio
{gallery}paesaggi,watermark=1,watermarkimage=logo_joompu110.png{/gallery}.
Nella cartella delle immagini viene creata un'altra cartella di nome "vm" nella quale viene salvata copia di tutte le immagini della galleria con sovrapposta la filigrana.

Reset watermark-image: Se viene cambiata l'immagine della filigrana o la sua posizione è necessario attivare questa opzione nel pannello di controllo del plugin in modo da riscrivere la cartella "vm". Se una volta caricata la galleria dal frontend tutto corrisponde ai nostri desideri, questa opzione va disattivata.

Position of the watermark (watermarkposition): per indicare la posizione della filigrana; è possibile posizionarla al centro dell'immagine, in alto a destra, in alto a sinistra, in basso a destra, in basso a sinistra.


Altre implementazioni ed opportunità

Non è stata trascurata la possibilità di mostrare singole diapositive di una galleria, questo lo si può fare solo in maniera contestuale con il pulsante SIGE Parameters facendo ricorso ai seguenti parametri:
single: mostra una singola miniatura; il nome del file deve essere completo di estensione;
scaption: titolo della singola immagine;
single_gallery: per mostrare tutta la galleria nella slideshow;
salign: allineare il testo alla singola immagine .

In una slideshow è possibile anche collegare fra loro (e quindi mostrarle di seguito) sia immagini singole che gallerie mediante il parametro connect, assegnandogli un valore comune; ad esempio con il codice
{gallery}paesaggi,connect=collega{/gallery}    {gallery}banners,connect=collega{/gallery}
le gallerie delle immagini nelle cartelle paesaggi e banners saranno collegate avendo assegnato a connect la stessa costante "collega".

In ciascuna delle sue cartella di immagini SIGE genera automaticamente un file index.html per impedire la lettura del suo contenuto direttamente dal browser.

Attraverso SIGE Parameters/Gallery, ed il parametro word, è possibile mostrare la galleria senza visualizzarne le miniature, collegandola ad una o più parole; ad esempio
{gallery}paesaggi,word=i panorama più belli della Puglia{/gallery}
è il codice che viene inserito se nel campo di word digitiamo la frase "i panorama più belli della Puglia".
Se si vuole richiamare una sola immagine è necessario combinare quest'ultima opzione con quelle della rappresentazioni di singole immagini; ad esempio se aggiungiamo nella opzione single "barletta.jpg" il codice immesso da SIGE Parameters sarà:
{gallery}paesaggi,word=i panorama più belli della Puglia,single=barletta.jpg{/gallery}.


E non finisce qui!
Se il numero delle immagini è troppo alto, la memorizzazione delle miniature, creazione delle immagini con filigrana, immagini ridimensionate... il tempo necessario potrebbe non essere trascurabile.
Attivando la modalità turbo si ha una riduzione del tempo richiesto che può arrivare anche oltre il 90%.
Come si usa?
Dobbiamo innanzitutto trovare la configurazione ottimale per le miniature per poi applicare "Thumbnail storage".
Poi abilitiamo la modalità turbo (turbo) mediante Sige Parameters (non è attivabile globalmente dal pannello di controllo del plugin): al primo caricamento dell'immagine il plugin creerà, nella cartella delle immagini, i due file di testo
sige_turbo_css-it-IT.txt e sige_turbo_html-it-IT.txt;
da ora in poi, tutta la galleria verrà caricata da questi file di testo (=funzionalità cache) evitando così di ripetere il processo di editing di ogni immagine.
Se poi dopo aver creato i due file di testo con il modo turbo, vogliamo apportare modifiche dobbiamo comunicare a SIGE che vogliamo ricreare e sovrascriverli ai file di testo esistenti: scegliamo per turbo l'opzione new e dopo il primo caricamento riportiamolo su yes.

Per maggiori chiarimenti, consulta gli esempi, molto esplicativi, presenti sul sito degli sviluppatori; aiutati con un traduttore poiché sono in lingua tedesca!

Conclusioni

Il plugin si presta sia ad un facile utilizzo apportando poche modifiche ai valori di default, sia ad un utilizzo professionale per le innumerevoli combinazioni possibili dei parametri. Ed è un plugin free!

Ma non è oro tutto quello che luce! Purtroppo questa galleria non è nè "responsive" nè "adaptive"; un invito all'autore Viktor Vogel, ed auspicio, a porvi rimedio.


CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Giuseppe Isernia
Alcune informazioni su di me:
Mi occupo di Open Source, ed in particolare di Joomla, per passione così come per passione ho contribuito alla nascita dell'associazione Puglia Software Open Source (Puglia SOS). www.pugliasos.it facebook: PugliaSOS


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Calendario articoli

Dicembre 2017
Lun Mar Mer Gio Ven Sab Dom
27 28 29 30 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Ultima versione di Joomla!®

downloadVer. 3.8.3 Stabile Italiana
Data di rilascio: 12 Dicembre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: