Creare una galleria immagini

In questo articolo descrivo come creare e aggiungere una galleria fotografica utilizzando i mezzi messi a disposizione da WordPress, quindi senza l’aggiunta di estensioni (plugin) che, tuttavia, hanno il merito di aggiungere alcuni effetti interessanti soprattutto sotto l’aspetto estetico.

Ottimizzare le immagini

Come sempre, quando si parla di immagini, ed anche in questo caso per le immagini della galleria che si vuole creare, è importante che le immagini siano ottimizzate prima di essere caricate in WordPress attraverso questi passaggi:

1. ridimensionamento;
2. ritaglio;
3. definizione di un nome del file che sia comprensibile e descrittivo;
4. compressione.

Questi pochi passaggi sono descritti nell’articolo immagini per il web e siccome non portano via molto tempo, ed è sufficiente il programma Paint installato in tutti i sistemi Windows, è buona prassi farli per questi semplici motivi:

• dimostrare il nostro rispetto per l’utente che può avere un segnale limitato e/o una banda a consumo;
• non rallentare troppo il caricamento della pagina;
• non usare inutilmente lo spazio sul server.

Dimensioni delle immagini

Le immagini da utilizzare nella Community è sufficiente che abbiano una dimensione orizzontale compresa tra 320 px e 650px. Per immagini che devono presentare contenuti più definiti la dimensione orizzontale può arrivare a 850px e nei rari casi dove i particolari sono importanti, può essere necessario caricare immagini a 1024px.

Definisco solo la dimensione orizzontale e tralascio quella verticale, poiché nei programmi di grafica, si imposta una delle due dimensioni, mentre l’altra è calcolata in automatico, salvo non si voglia procedere ad una definizione particolare per ognuna delle due misure. Quando l’immagine è molto alta è utile controllare che all’impostazione dell’altezza corrisponda un’adeguata dimensione della larghezza.

Immagini che richiedono alte definizioni e quindi dimensioni di 1024px sono quelle al cui interno c’è del testo descrittivo, importante per la comprensione dell’immagine, come la grande immagine di 1024×490 px, che descrive la scheda delle opzioni galleria, che però nella sua visualizzazione viene mostrata a 888×430 px. In origine questa immagine pesava 450kb ridotti a 76kb con la compressione del servizio online www.tinypng.com.

Sono necessarie immagini grandi se nell’immagine c’è un dettaglio da evidenziare.

È importante anche il formato file scelto. Se pensate di dover rielaborare l’immagine e se in questa c’è testo, è preferibile il formato .png se si ritiene di non dover rielaborare l’immagine si può scegliere il formato .jpg. I motivi di queste scelte sono spiegati nell’articolo immagini per il Web , salvare i file: formato immagini.

Caricare immagini più grandi per ridurle attraverso le opzioni di ridimensionamento non serve, perché quel ridimensionamento avviene attraverso il codice, ma la dimensione dell’immagine resta quella originale. Questo significa che se si carica un’immagine da 1200px con un peso di 2,5 Mb e poi la si riduce a 350px, il peso dell’immagine sul server, ovvero lo spazio fisico che occupa, è sempre di 2,5 Mb ed è questo il consumo di banda dell’utente quando visualizza l’immagine sul suo dispositivo.

Un’altro aspetto importante relativo alle immagini è l’uso di immagini di libero uso, prive dai diritti d’autore, a meno che non si usino immagini prodotte in proprio. In entrambi i casi procedete a rinominare i file con nomi significativi e descrittivi di cosa rappresenta l’immagine.

Creare la galleria immagini

Fatta l’ottimizzazione delle immagini, si può procedere alla creazione della galleria.
La galleria si può inserire in articoli e pagine in qualunque punto si desidera, è sufficiente posizionare il cursore nel punto in cui si vuole inserirla.

Procediamo con ordine seguendo i passi qui descritti:

• Fai il login e accedi alla bacheca
• dal menu articoli, apri un articolo esistente o creane uno nuovo
• imposta l’editor in modalità Visuale
• fai clic sul pulsante Aggiungi Media
  
• seleziona, nella schermata che segue Crea Galleria.
  

Selezionare le immagini per la galleria

Per la galleria si possono scegliere le immagini in questi modi:

• immagini presenti nella libreria, facendo clic sul pulsante Libreria;
• caricarne di nuove facendo click sul pulsante Carica file;
• usare sia le immagini presenti nella galleria sia aggiungerne di nuove, eseguendo l’upload.

Per selezionare più immagini in ordine casuale, fai clic sull’immagine tenendo premuto il tasto ctrl.

Per selezionare immagini in sequenza, fai clic sulla prima immagine e poi tenendo premuto il tasto shift, fai clic sull’ultima immagine della sequenza.

Le immagini selezionate che comporranno la galleria sono visibili nella sezione inferiore della finestra.

Selezionate le immagini, clicca sul pulsante Crea una nuova galleria in basso a destra.

Si aprirà la scheda di configurazione della galleria, con queste opzioni (fai clic sull’immagine per vedere la versione più grande).

Impostazioni della galleria immagini

Fatto clic su Inserisci galleria, le immagini selezionate sono inserite nell’articolo non più come singole unità, ma come una galleria di immagini, che potrai modificare a piacimento, inserendo, spostando, eliminando le immagini a seconda delle necessità.

Per cambiare le impostazioni della galleria fai clic su un’immagine qualsiasi. Le immagini appaiono all’interno di un riquadro blu con due icone sul lato superiore.

Per modificare le impostazioni della galleria fai clic sulla matita; per cancellare la galleria, fai clic sulla x a destra della matita. Per cambiare le impostazioni di ogni singola immagine fai clic prima sulla matita per aprire la scheda modifica delle impostazioni, e poi seleziona l’immagine.

Definire le opzioni della scheda Impostazioni Galleria

Diverse sono le opzioni che possono essere definite nella pagina delle impostazioni, vediamole una ad una.

Ordine delle immagini

Nella galleria si possono riordinare le immagini trascinandole nella posizione preferita, oppure si può scegliere l’ordine inverso cliccando sul bottone specifico. Nella colonna di destra, si possono definire altre opzioni come link a file media, numero di colonne, ordine casuale, e dimensione dell’anteprima.

Opzione Link a

Nella barra laterale destra della finestra Modifica galleria, puoi selezionare se le immagini della galleria avranno un link a:

File media:

in questo caso, quando l’utente cliccherà sull’immagine si aprirà una nuova scheda dove sarà visualizzata l’immagine nelle sue dimensioni reali. Ho usato questa opzione per l’immagine di configurazione galleria.
In questo modo l’utente carica un’immagine di piccole dimensioni e se interessato fa clic su di essa per vedere una versione più grande.

Allegato pagina:

selezionando questa opzione, quando l’utente cliccherà sull’immagine si aprirà una finestra contenente l’articolo o pagina cui l’immagine si riferisce.

URL personalizzata:

inserisci un URL che punta ad un file o ad una pagina o ad un articolo del blog o a siti esterni;

Nessuna:

in questo caso le immagini non avranno un link cliccabile.

Numero di colonne della galleria

Questa opzione, è utile per definire il numero di colonne in cui visualizzare e disporre le immagini di anteprima ed è compreso tra 1 e 9. È necessario mantenere l’equilibrio tra immagini e contenuto testuale; se le immagine fossero diverse e il testo piuttosto lungo, potrebbe essere un’idea dividere le immagini in più gallerie da inserire nel testo.

Opzioni per le immagini

Ogni immagine può avere delle impostazioni personali il titolo e il testo alt hanno particolare importanza.

Titolo

È necessario come già detto trovare un nome comprensibile e descrittivo per il titolo dell’immagine, perché è quello che apparirà come titolo di ogni singola immagine quando questa verrà aperta. Se avete già dato un nome al file, o avete rinominato il file immagine, con queste caratteristiche, potete copiarlo ed incollarlo nel campo dove è richiesto di inserire il titolo ed eventualmente utilizzarlo anche come testo alt inserendo qualche parola in più per descrivere cosa rappresenta l’immagine.

Per esempio se l’immagine rappresenta una spiaggia con ombrelloni colorati, chiamate il file spiaggia_ombrelloni.png, il titolo potrebbe essere, Spiaggia con ombrelloni colorati, mentre il testo alt, potrebbe essere, La spiaggia di nome del posto con ombrelloni colorati, gente che prende il sole mentre altri fanno il bagno.

Testo alt

Il testo alternativo è visualizzato dal browser nel caso l’immagine non fosse caricata ed è letto dagli screen reader, migliorando l’accessibilità dei contenuti.

Eliminare e aggiungere immagini dalla galleria

Per rimuovere un’immagine, muovi il mouse sopra l’immagine di anteprima corrispondente e clicca sulla x in alto a destra. Per aggiungere nuove immagini alla galleria, fai clic sul link Aggiungi alla galleria nella colonna di sinistra, dopo aver selezionato le immagini da aggiungere fai clic in basso a destra su Aggiungi alla galleria, ora sei di nuovo nella finestra di configurazione della galleria.

Completa le opzioni di configurazione, e fai clic su Inserisci galleria in questo modo sono salvate le nuove impostazioni.

Se il lavoro fatto non è soddisfacente si può eliminare la galleria immagini, cliccando sul pulsante Cancella Galleria per rimuovere le modifiche e tornare all’editor in modalità Visuale. Come vedi, in pochi passaggi puoi aggiungere o cancellare gallerie a tuo piacimento, lavorando sempre sullo stesso articolo.

Se passi alla modalità Testo, puoi vedere come viene caricata la galleria nell’articolo. L’inserimento avviene attraverso shortcode, dove oltre al numero identificativo della galleria, appaiono anche i numeri identificativi delle immagini.

Ora puoi inserire una galleria di immagini nei tuoi articoli, ma non esagerare. Ricorda che le immagini devono essere significative per il contenuto e se diverse mostrano lo stesso soggetto, solo una è necessaria.