Foto Ricordi, con sigplus della Levente Hunyadi
Salerno - Mercoledì 24 maggio 2023.
Di seguito riporto una galleria di foto che abbracciano la maggior parte degli anni della mia vita.
Per il momento le ho solo caricate. Appena avrò tempo, provvederò a sistemarle meglio, correggendo i vari difetti (dimensioni uniformi, orientamento, disposizione delle foto nella pagina , ecc.
Secondo il suggerimento di S. Aranzulla, è possibile inserire le parentesi graffe anche tramite tastiera qwerty - normalmente, nell'editor di testo di un articolo scritto con Joomla - inserendo la parola charmap in "Cerca" del tasto START (quello in basso alla tastiera, il secondo da sinistra), e poi facendo crtrl v sulla tastiera nel punto dove occorre.
Esempio di parentesi graffa di apertura: {
Esempio di parentesi graffa di chiusura: }
Un'applicazione:
Per il trattamento delle immagini e delle foto Sigplus fornisce i seguenti tre link fondamentali:
Ognuno di questi tre argomenti di base riporta link che rinviano a casi specifici di trattamento, che qui non riportiamo per esteso per contenere la lunghezza dell'articolo entro i limiti di un normale articolo di Joomla!
Programma dei passi successivi
Un primo passo importante è stato fatto: il caricamento delle immagini.
Molto resta da fare: disposizione e incolonnamento delle immagini, dimensioni delle immagini, ritocchi, ecc.
I prossimi link da prendere in considerazione sono i seguenti:
l' utilizzo avanzato copre casi d'uso più sofisticati.
Per un elenco completo dei parametri sigplus, vedere Impostazioni di configurazione back-end
Di seguito si riporta un elenco parziale delle modifiche possibili; per visualizzare tute le modifiche, occorre leggere le cinque pagine sull'argomento.
- Come aggiungere un bordo alle immagini di anteprima
- Ordinamento delle immagini in base a un criterio personalizzato
- Personalizzazione delle opzioni di ordinamento
- Come modificare la larghezza e l'altezza della miniatura
- Come fare in modo che le didascalie rimangano sempre in primo piano
- Come modificare la lightbox e l'effetto di transizione del rotatore e l'allineamento dell'elemento del rotatore
- Come posizionare una filigrana sulle immagini
- Come rendere le immagini scaricabili
Come aggiungere un bordo alle immagini di anteprima
Configurazione nel back-end di amministrazione
Impostazioni di base:
- Numero di righe immagine: 2
- Numero di colonne immagine: 3
- Allineamento sulla pagina: centro
- Ritardo presentazione (in ms): 5000
- Orientamento del rotatore dell'immagine: verticale
Impostazioni avanzate:
- Margine di anteprima: 4
- Anteprima stile bordo: punteggiato
- Larghezza bordo anteprima: 2
- Colore bordo anteprima: rosso scuro (#520909)
- Anteprima imbottitura: 2
Tutte le altre impostazioni sono invariate rispetto alle loro impostazioni predefinite.
Descrizione ed esempio dal vivo
Utilizzo nel testo dell'articolo
Ordinamento delle immagini in base a un criterio personalizzato
Impostazioni di base:
- Numero di righe immagine: 1
- Numero di colonne immagine: 4
- Barra di navigazione Lightbox: nell'area delle didascalie
- Ritardo animazione (in ms): 2000
Impostazioni avanzate:
- Margine di anteprima: 4
- Anteprima stile bordo: doppio
- Larghezza bordo anteprima: 3
- Colore bordo anteprima: blu cielo profondo (#216b80)
- Anteprima imbottitura: 3
- Criterio di ordinamento delle immagini: dimensione del file
- Ordinamento immagini: crescente
Tutte le altre impostazioni sono invariate rispetto alle loro impostazioni predefinite.
Personalizzazione delle opzioni di ordinamento
Le immagini in una galleria possono essere presentate secondo molti criteri di ordinamento diversi sia in ordine crescente che decrescente. In primo luogo, le immagini seguono l'ordine in cui sono elencate nel file delle etichette, ma altre opzioni di ordinamento includono il nome del file, l'ora dell'ultima modifica o la disposizione casuale (le immagini vengono mescolate ogni volta che la pagina viene caricata).
Configurazione nel back-end di amministrazione
Impostazioni di base:
- Numero di righe immagine: 3
- Numero di colonne immagine: 2
- Allineamento sulla pagina: centro
- Tipo pop-up Lightbox: tema di colore chiaro boxplus
- Barra di navigazione Lightbox: nell'area delle didascalie
- Ritardo presentazione (in ms): 5000
- Presentazione di avvio automatico: sì
- Passaggio di attivazione dell'azione: pagina
Impostazioni avanzate:
- Margine di anteprima: 5
- Anteprima stile bordo: 3D rigato
- Larghezza bordo anteprima: 5
- Anteprima colore bordo: asta dorata (#daa520)
- Anteprima imbottitura: 4
- Criterio di ordinamento dell'immagine: nome del file
- Ordinamento immagini: decrescente
Come modificare la larghezza e l'altezza della miniatura
Configurazione nel back-end di amministrazione
Impostazioni di base:
- Numero di righe immagine: 2
- Numero di colonne immagine: 2
- Allineamento sulla pagina: a sinistra con il testo a capo
- Orientamento del rotatore dell'immagine: verticale
- Ritardo animazione (in ms): 4000
- Posizione della didascalia dell'immagine: sopra
Impostazioni avanzate:
- Colore bordo anteprima: verde foresta (#1c451c)
- Anteprima imbottitura: 3
- Larghezza miniatura: 70
- Altezza miniatura: 50
- Ritaglia durante il ridimensionamento: sì
Configurazione nel back-end di amministrazione
Impostazioni di base:
-
Numero di righe immagine: 2
-
Numero di colonne immagine: 3
-
Numero massimo di immagini: 5
-
Allineamento sulla pagina: centro
-
Tipo pop-up Lightbox: tema di colore chiaro boxplus
-
Ritardo presentazione (in ms): 7000
-
Orientamento del rotatore dell'immagine: verticale
-
Passaggio di attivazione dell'azione: pagina
-
Visibilità della didascalia dell'immagine: sempre
-
Posizione della didascalia dell'immagine: sovrapposizione superiore
Impostazioni avanzate:
-
Margine di anteprima: 4
-
Stile bordo anteprima: inizio 3D
-
Larghezza bordo anteprima: 2
-
Colore bordo anteprima: marrone (#4f2105)
-
Anteprima imbottitura: 3
-
Larghezza miniatura: 40
-
Altezza miniatura: 40
-
Ritaglia durante il ridimensionamento: sì
-
Iscrizione ed esempio dal vivo
Come modificare la lightbox e l'effetto di transizione del rotatore e l'allineamento dell'elemento del rotatore
Configurazione nel back-end di amministrazione
Impostazioni di base:
-
Numero di righe immagine: 1
-
Numero di colonne immagine: 1
-
Allineamento sulla pagina: a sinistra con il testo a capo
-
Tipo di pop-up Lightbox: tema boxplus colore scuro
-
Barra di navigazione Lightbox: nell'area delle didascalie
-
Trigger di navigazione: mouseover
Impostazioni avanzate:
-
Margine di anteprima: 5
-
Anteprima stile bordo: 3D rigato
-
Larghezza bordo anteprima: 5
-
Anteprima colore bordo: argento
-
Anteprima imbottitura: 4
-
Effetto di transizione Lightbox: circolare
-
Allineamento dell'elemento del rotatore: est
-
Effetto di transizione dei rotatori: esponenziale
Descrizione ed esempio dal vivo
Il risultato è una galleria con una riga e una colonna sul lato sinistro. Il testo può andare a capo intorno all'anteprima. Una finestra pop-up con uno sfondo nero e angoli arrotondati verrà visualizzata se si fa clic sull'immagine di anteprima. Le miniature sono mostrate nell'area delle didascalie. Spostando il puntatore del mouse sui collegamenti di controllo vicino all'anteprima, il rotatore inizia ad avanzare. Il bordo è largo 5 px, ha colore argento, mostra in stile 3D rigato ed è circondato da un margine largo 5 px. Il riempimento intorno all'anteprima è largo 4 px.
Utilizzo nel testo dell'articolo
Come posizionare una filigrana sulle immagini
sigplus può elaborare il formato immagine lossy JPEG, così come i formati di immagine lossless GIF, PNG e WEBP, entrambi con trasparenza del canale alfa. Per tutti i formati di immagine, sigplus supporta la filigrana. Una filigrana è un file PNG con canale di trasparenza (cioè l'immagine ha una combinazione di colori RGBA) collocato nella stessa cartella in cui si trovano le immagini da mostrare (specificate all'interno dei tag di inizio e fine attivazione plug-in) o nella cartella base dell'immagine (specificata nel back-end di amministrazione). Grazie al supporto per la trasparenza del canale alfa, la filigrana si fonde perfettamente con lo sfondo dell'immagine su cui è sovrapposta.
Configurazione nel back-end di amministrazione
Impostazioni di base:
-
Numero di righe immagine: 3
-
Numero di colonne immagine: 2
-
Allineamento sulla pagina: a sinistra con il testo a capo
-
Tipo pop-up Lightbox: tema di colore chiaro boxplus
-
Ritardo presentazione (in ms): 3000
-
Presentazione di avvio automatico: sì
-
Posizione della didascalia dell'immagine: sotto
Impostazioni avanzate:
-
Margine di anteprima: 6
-
Anteprima stile bordo: solido
-
Larghezza bordo anteprima: 2
-
Colore bordo anteprima: viola scuro (#541054)
-
Anteprima imbottitura: 3
-
Posizione filigrana: sud-est
-
Distanza da orizzontale: 12
-
Distanza dalla verticale: 7
-
Nome file per filigrana: filigrana.png
-
Effetto di transizione lightbox: lineare
-
Allineamento elemento rotatore: ovest
-
Effetto di transizione del rotatore: lineare
Descrizione ed esempio dal vivo
In questo esempio viene illustrata una raccolta con tre righe e due colonne sul lato sinistro della pagina. Il testo può andare a capo intorno alle anteprime. La finestra pop-up viene visualizzata con uno sfondo bianco. La presentazione inizierà immediatamente non appena appare la finestra pop-up, non è necessario premere il pulsante di controllo. Durante la presentazione passano tre secondi tra la navigazione alle immagini successive. Le didascalie delle immagini vengono visualizzate sotto le anteprime. Un bordo solido viola scuro largo 2 px appartiene a tutte le anteprime. Il margine intorno ai bordi ha una larghezza di 6 px e una spaziatura interna larga 3 px circonda le anteprime. Ogni immagine nella finestra pop-up è filigranata nell'angolo in basso a destra (sud-est). La distanza della filigrana dal bordo dell'immagine è di 12 px orizzontalmente e 7 px verticalmente.
Utilizzo nel testo dell'articolo
Come rendere le immagini scaricabili
sigplus può elaborare il formato immagine lossy JPEG, così come i formati di immagine lossless GIF, PNG e WEBP, entrambi con trasparenza del canale alfa. Per tutti i formati di immagine, sigplus supporta la filigrana. Una filigrana è un file PNG con canale di trasparenza (cioè l'immagine ha una combinazione di colori RGBA) collocato nella stessa cartella in cui si trovano le immagini da mostrare (specificate all'interno dei tag di inizio e fine attivazione plug-in) o nella cartella base dell'immagine (specificata nel back-end di amministrazione). Grazie al supporto per la trasparenza del canale alfa, la filigrana si fonde perfettamente con lo sfondo dell'immagine su cui è sovrapposta.
Configurazione nel back-end di amministrazione
Impostazioni di base:
- Numero di righe immagine: 3
- Numero di colonne immagine: 2
- Allineamento sulla pagina: a sinistra con il testo a capo
- Tipo pop-up Lightbox: tema di colore chiaro boxplus
- Ritardo presentazione (in ms): 3000
- Presentazione di avvio automatico: sì
- Posizione della didascalia dell'immagine: sotto
Impostazioni avanzate:
- Margine di anteprima: 6
- Anteprima stile bordo: solido
- Larghezza bordo anteprima: 2
- Colore bordo anteprima: viola scuro (#541054)
- Anteprima imbottitura: 3
- Posizione filigrana: sud-est
- Distanza da orizzontale: 12
- Distanza dalla verticale: 7
- Nome file per filigrana: filigrana.png
- Effetto di transizione lightbox: lineare
- Allineamento elemento rotatore: ovest
- Effetto di transizione del rotatore: lineare
Descrizione ed esempio dal vivo
In questo esempio viene illustrata una raccolta con tre righe e due colonne sul lato sinistro della pagina. Il testo può andare a capo intorno alle anteprime. La finestra pop-up viene visualizzata con uno sfondo bianco. La presentazione inizierà immediatamente non appena appare la finestra pop-up, non è necessario premere il pulsante di controllo. Durante la presentazione passano tre secondi tra la navigazione alle immagini successive. Le didascalie delle immagini vengono visualizzate sotto le anteprime. Un bordo solido viola scuro largo 2 px appartiene a tutte le anteprime. Il margine intorno ai bordi ha una larghezza di 6 px e una spaziatura interna larga 3 px circonda le anteprime. Ogni immagine nella finestra pop-up è filigranata nell'angolo in basso a destra (sud-est). La distanza della filigrana dal bordo dell'immagine è di 12 px orizzontalmente e 7 px verticalmente.
Nota importante: attenzione a non lasciarsi sfuggire quel link Successivo che sta in fondo a destra della pagina, perché rinvia a ulteriori notifiche per ben 5 volte!
Link interessanti:
- Casa (hunyadi.info.hu)
- Utilizzo esperto (hunyadi.info.hu)
- Didascalie delle immagini e modelli di didascalie (hunyadi.info.hu)
- Concetti chiave (hunyadi.info.hu)
- Impostazioni di configurazione back-end (hunyadi.info.hu)
- Sintassi del plug-in e utilizzo del modulo (hunyadi.info.hu)
- Filtri immagine (hunyadi.info.hu)
Tags: Foto Ricordi, con sigplus della Levente Hunyadi;, Inserimento di parentesi graffe in un articolo di Joomla!;