Come inserire una galleria di immagini su un sito web

Per il successo di una pagina, l’aspetto visivo è spesso es­sen­zia­le; grafiche e immagini sono pertanto un com­po­nen­te im­por­tan­te di ogni sito web. Le gallerie sono un mezzo molto ap­prez­za­to per integrare più immagini in modo ordinato nel proprio sito web. Per in­cor­po­ra­re queste serie di immagini esistono diverse pos­si­bi­li­tà: gli utenti possono, ad esempio, integrare un semplice lightbox nel proprio sito tramite il codice sorgente oppure uti­liz­za­re esten­sio­ni del CMS.

Come integrare un lightbox

Un lightbox è una delle strategie più semplici per pre­sen­ta­re immagini su un sito web. Viene pro­gram­ma­to come HTML dinamico in Ja­va­Script. Se si clicca sull’immagine di anteprima, si apre l’immagine in formato grande con il sito web oscurato come sfondo. Un lightbox di questo tipo si può in­cor­po­ra­re in maniera semplice nel proprio sito web e integrare con ulteriori funzioni, di modo che si adatti bene allo sviluppo web moderno.

Come pre­re­qui­si­to è ne­ces­sa­rio una versione ag­gior­na­ta di lightbox e na­tu­ral­men­te l’immagine, inclusiva di thumbnail (cioè l’anteprima), che si vorrebbe inserire sul proprio sito web. Il primo lightbox è stato pro­gram­ma­to da Lokesh Dhakar nel 2005 e lo script è stato ri­la­scia­to poco dopo con la licenza Creative Commons. Nel frattempo, sono nate numerose versioni dello script più amato. Tra queste si contano sia gli script svi­lup­pa­ti da singoli utenti sia i plugin della libreria Ja­va­Script e le esten­sio­ni dei CMS.

1. Scaricare lightbox

Il più famoso script di lightbox è di­spo­ni­bi­le gra­tui­ta­men­te sul sito web di Lokesh Dhakar. De­com­pri­men­do il file zip, si trovano i seguenti elementi: il file index.html nella cartella examples, dove è presente anche un esempio di ap­pli­ca­zio­ne, e nella directory dist tre cartelle css, images e js.

2. Collegare il file CSS e Ja­va­Script

Il passo suc­ces­si­vo è quello di copiare il file lightbox.css dalla cartella CSS alla directory CSS del sito web e i file .js in quella Ja­va­Script. Entrambi i file si trovano nelle cartelle apposite nella directory dist. Inoltre, per caricare il foglio di stile CSS si deve copiare la seguente riga nell’head del sito web in questione:

<link href="la-tua-cartella-css/lightbox.css" rel="stylesheet">

E la riga seguente deve essere inserita alla fine, prima del tag con­clu­si­vo </body>, per integrare il codice Ja­va­Script ne­ces­sa­rio:

<script src="la-tua-cartella-js/lightbox.js"></script>

3. Inserire gli attributi di lightbox in HTML per la galleria

Ogni immagine, che si vorrebbe vi­sua­liz­za­re con il lightbox, ha bisogno nel codice sorgente di un attributo HTML adatto, con il quale si mettono a di­spo­si­zio­ne le in­for­ma­zio­ni ne­ces­sa­rie allo script. Ogni link a un’immagine deve avere l’attributo data-lightbox e un nome in­di­vi­dua­le per ogni galleria. Le immagini che do­vreb­be­ro trovarsi nello stesso slideshow (sequenza di immagini) ne­ces­si­ta­no tutte dello stesso attributo data-lightbox. Per integrare una di­da­sca­lia, si usa l’attributo data-title con il testo cor­ri­spon­den­te.

Esempio: inserire un’immagine singola

<a href="images/foto1.jpg" data-lightbox="foto1" data-title="Didascalia">
<img src="images/foto1-anteprima.jpg" alt="Testo alternativo">
</a>

Esempio: inserire uno slideshow con più immagini

<a href="images/foto2.jpg" data-lightbox="slideshow1" data-title="mattino"><img src="images/foto2-anteprima.jpg" alt="Testo alternativo"></a>
<a href="images/foto3.jpg" data-lightbox="slideshow1" data-title="pomeriggio"><img src="images/foto3-anteprima.jpg" alt="Testo alternativo"></a>
<a href="images/foto4.jpg" data-lightbox="slideshow1" data-title="sera"><img src="images/foto4-anteprima.jpg" alt="Testo alternativo"></a>

4. Adattare il lightbox

A questo punto, il lightbox è inserito nel sito web. Na­tu­ral­men­te ci sono ancora ulteriori pos­si­bi­li­tà per per­so­na­liz­za­re lo slideshow. Per adattarlo ti basta usare il metodo option dopo il ca­ri­ca­men­to dello script e inserire lì i ri­spet­ti­vi valori. La funzione è la seguente:

<script src="la-tua-cartella-js/lightbox.js"></script>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
});
</script>

Le opzioni più im­por­tan­ti in sintesi

Esistono diversi attributi con cui puoi adattare il com­por­ta­men­to del lightbox all’interno della funzione option. Qui trovi i più im­por­tan­ti:

Al­ter­na­ti­va­men­te, ci sono anche molti altri programmi per creare una galleria di immagini per­so­na­liz­za­ta e in­cor­po­rar­la nel proprio sito web. Di regola, gli strumenti sono molto semplici e intuitivi da usare, dato che la maggior parte dispone di un editor drag and drop.

Inserire gallerie di immagini di­ret­ta­men­te in HTML e CSS

Le gallerie di immagini si possono rea­liz­za­re anche senza Ja­va­Script o lightbox, di­ret­ta­men­te con HTML e CSS. In questo caso, le immagini vengono per lo più disposte in una griglia fles­si­bi­le (grid o flexbox), che si adatta au­to­ma­ti­ca­men­te a diverse di­men­sio­ni dello schermo. Questa soluzione semplice è par­ti­co­lar­men­te adatta per tempi di ca­ri­ca­men­to rapidi, design re­spon­si­ve e siti web che vogliono con­sa­pe­vol­men­te ri­nun­cia­re a script esterni.

Con poche righe di CSS puoi rea­liz­za­re una galleria ac­cat­ti­van­te e chiara, che sia allo stesso tempo per­for­man­te e ot­ti­miz­za­ta per i motori di ricerca. Un esempio di una semplice galleria di immagini potrebbe essere il seguente:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galleria di immagini semplice</title>
<style>
body {
margin: 0;
padding: 2rem;
background-color: #f9f9f9;
}
h2 {
text-align: center;
margin-bottom: 1.5rem;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery img:hover {
transform: scale(1.03);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h2>La mia galleria di immagini</h2>
<div class="gallery">
<img src="images/foto-1.jpg" alt="Alba sul mare">
<img src="images/foto-2.jpg" alt="Prato fiorito in primavera">
<img src="images/foto-3.jpg" alt="Paesaggio montano al tramonto">
<img src="images/foto-4.jpg" alt="Vista della città di notte">
<img src="images/foto-5.jpg" alt="Sentiero nel bosco in autunno">
</div>
</body>
</html>

Nel codice HTML del nostro esempio minimale vengono definiti un titolo h2 e un con­te­ni­to­re div, in cui sono inserite più immagini con il tag img. Ogni immagine ha un attributo alt che contiene una breve de­scri­zio­ne. Questo aspetto è im­por­tan­te per l’ac­ces­si­bi­li­tà e per la SEO. Nel codice CSS, la vi­sua­liz­za­zio­ne a griglia (display: grid) fa sì che le immagini vengano disposte au­to­ma­ti­ca­men­te in colonne, adat­tan­do­si in modo fles­si­bi­le alla di­men­sio­ne dello schermo. Con gap: 10px si crea un po’ di spazio tra le immagini. Grazie agli effetti hover (in­gran­di­men­to e ombra), la galleria risulta più in­te­rat­ti­va e moderna quando si passa con il mouse sopra un’immagine.

Esten­sio­ni per gallerie di immagini per i CMS

Nella creazione di un proprio sito web molte imprese, come anche i la­vo­ra­to­ri in­di­pen­den­ti, decidono di usare un sistema di gestione dei contenuti (CMS). I CMS offrono un vantaggio im­por­tan­te: una struttura del sito web già pronta. Inoltre, la maggior parte dei sistemi permette di creare un sito web pro­fes­sio­na­le anche senza ap­pro­fon­di­te co­no­scen­ze in­for­ma­ti­che o di pro­gram­ma­zio­ne.

Oltre all’utilizzo intuitivo e all’in­ter­fac­cia user-friendly, molti ap­prez­za­no anche la struttura fles­si­bi­le di sistemi come Joomla! o Typo3. At­tra­ver­so la struttura modulare, spesso si può ampliare il CMS e adattarlo in base alle esigenze in­di­vi­dua­li. Ciò è reso possibile, tra l’altro, dalle grandi community di molti sistemi open source, che creano numerose esten­sio­ni e plugin, tra i quali ci sono anche quelli per creare e in­cor­po­ra­re gallerie di immagini pro­fes­sio­na­li. Ti pre­sen­tia­mo alcune soluzioni per i sistemi Joomla!, WordPress e TYPO3.

Gallerie di immagini su WordPress

WordPress è il CMS open source più usato al mondo. Sebbene sia stato concepito ini­zial­men­te come sistema per blog, è diventato nel frattempo grazie alle molte pos­si­bi­li­tà di esten­sio­ne e di per­so­na­liz­za­zio­ne un CMS completo, che può anche essere usato in altri ambiti. Proprio negli ambienti della moda, del lifestyle o della bellezza, la rap­pre­sen­ta­zio­ne grafica di questi ambiti ha un grande rilievo. Non stupisce quindi che tra più di 60.000 esten­sio­ni, ce ne siano anche molte per le gallerie di immagini, oltre ai plugin.

NextGen Gallery

NextGen Gallery è uno dei plugin di WordPress più co­no­sciu­ti. Con Next Gen sono possibili sia gallerie di thumbnail sia slideshow, oltre che ad avere l’opzione lightbox integrata e tutto con un design re­spon­si­ve. Il plugin offre anche molte opzioni per gallerie molto grandi e, at­tra­ver­so la sua struttura chiara e un’usabilità semplice, facilita sia l’upload di grandi quantità di immagini sia la loro gestione. Si possono scegliere parametri come di­men­sio­ni, numeri e in­ter­val­li, e si creano in po­chis­si­mo tempo anche i watermark. In generale NextGen punta sull’usabilità e su un’in­ter­fac­cia utente strut­tu­ra­ta chia­ra­men­te. Tra i plugin di WordPress è di­spo­ni­bi­le per il download la versione gratuita di NextGen Gallery. Sul sito web dello svi­lup­pa­to­re si trovano inoltre le versioni a pagamento, che di­spon­go­no di funzioni ag­giun­ti­ve per un uso pro­fes­sio­na­le e offrono alcune funzioni in­te­res­san­ti, so­prat­tut­to per gli e-commerce.

Envira Gallery (Lite)

Anche il plugin Envira Gallery consente di creare gallerie di immagini per il proprio sito web. L’utente può creare gallerie per­so­na­liz­za­te sia per singoli post sia per pagine, oltre che gallerie globali.

Su Envira, il design re­spon­si­ve è rea­liz­za­to per mezzo della fun­zio­na­li­tà “out of the box” e si possono creare sia gallerie sia lightbox. La par­ti­co­la­ri­tà è che il programma carica in maniera asincrona le immagini e per questa ragione non si com­pro­met­to­no né il tempo di ca­ri­ca­men­to né la per­for­man­ce nelle gallerie di immagini di grandi di­men­sio­ni. Quindi il plugin per gallerie di immagini Envira influenza po­si­ti­va­men­te anche la SEO perché il tempo di ca­ri­ca­men­to è un fattore im­por­tan­te per il ranking.

La versione gratuita di Envira Gallery Lite è di­spo­ni­bi­le per il download tra i plugin sul sito di WordPress. I pacchetti avanzati sono a pagamento ma, ad esempio, offrono watermark o gallerie di video. Scopri di più sul sito web ufficiale di Envira Gallery.

Me­ta­Sli­der

Anche il plugin WordPress Me­ta­Sli­der rientra tra le soluzioni più ap­prez­za­te per pre­sen­ta­re immagini e slideshow su un sito web. Grazie alla sua in­ter­fac­cia intuitiva drag and drop, puoi creare slider in pochi minuti, senza che siano ne­ces­sa­rie com­pe­ten­ze di pro­gram­ma­zio­ne. L’utente può scegliere tra diversi tipi di slider e per­so­na­liz­za­re stile, ani­ma­zio­ni ed effetti di tran­si­zio­ne in base alle proprie esigenze.

Un vantaggio es­sen­zia­le di Me­ta­Sli­der è il design com­ple­ta­men­te re­spon­si­ve. Tutti gli slider si adattano au­to­ma­ti­ca­men­te alle di­men­sio­ni dello schermo, con­sen­ten­do una vi­sua­liz­za­zio­ne ottimale di immagini e testi sia su computer desktop sia su smart­pho­ne o tablet. Inoltre, il plugin offre una serie di opzioni SEO. Me­ta­Sli­der è anche com­pa­ti­bi­le con l’editor a blocchi di WordPress (Gutenberg) e con i più comuni page builder e può essere integrato senza problemi nei layout esistenti. La versione gratuita di Me­ta­Sli­der è di­spo­ni­bi­le nella directory ufficiale dei plugin di WordPress. Chi ha bisogno di più funzioni può ef­fet­tua­re l’upgrade alla versione Pro, che offre, tra le altre cose, slider video e na­vi­ga­zio­ne tra le miniature.

Gallerie di immagini per Joomla!

Anche Joomla! gode di una po­po­la­ri­tà sempre maggiore, sia in Italia che all’estero, e rientra nella lista dei tre CMS più usati. Anche su Joomla! gli utenti possono contare su una grande community e una vasta scelta di esten­sio­ni e plugin.

sigplus

sigplus, acronimo di Simple Image Gallery Plus, ha come pre­sup­po­sto la sem­pli­ci­tà, come il nome già sug­ge­ri­sce, e supporta gli utenti nella creazione di una galleria di immagini semplice. Il plugin raggiunge gli obiettivi pre­fis­sa­ti e si adatta so­prat­tut­to a piccoli siti web e gallerie con un numero gestibile di immagini. Inoltre, mentre gli utenti inesperti ap­pro­fit­ta­no dell’uso semplice e intuitivo, quelli esperti hanno anche a di­spo­si­zio­ne ulteriori im­po­sta­zio­ni, come thumbnail e caching, nella “modalità Advanced”. Il plugin è gratuito e si trova tra le esten­sio­ni di Joomla!.

Phoca Gallery

Anche Phoca Gallery è gratuito, ma con un numero di fun­zio­na­li­tà de­ci­sa­men­te maggiore rispetto al so­pra­ci­ta­to sigplus. Il plugin offre la pos­si­bi­li­tà di inserire gallerie di immagini e slideshow nel proprio sito web Joomla!, ma il suo uso non è così intuitivo e in par­ti­co­la­re chi è agli inizi ha bisogno di un certo periodo di adat­ta­men­to per poter usare pie­na­men­te le funzioni. Tuttavia, se si riesce a gestire l’esten­sio­ne, sono poi a di­spo­si­zio­ne, oltre alle funzioni base, anche pratiche fun­zio­na­li­tà che con­sen­to­no di inserire watermark o l’opzione di download per gli utenti. L’esten­sio­ne gratuita si trova sul sito web di Joomla!, mentre sulla pagina ufficiale dello svi­lup­pa­to­re sono a di­spo­si­zio­ne una do­cu­men­ta­zio­ne esaustiva, moduli ag­giun­ti­vi e altri plugin.

Showtime Image Gallery

Il plugin Joomla! a pagamento Showtime Image Gallery consente di creare fa­cil­men­te gallerie di immagini pro­fes­sio­na­li di­ret­ta­men­te all’interno del sistema di gestione dei contenuti. Gli utenti possono creare gallerie per singoli articoli o pagine e in­te­grar­le tramite moduli o shortcode. Con il supporto dei più comuni script lightbox come FancyBox, Light­Gal­le­ry o Pho­to­Swi­pe, le immagini possono essere pre­sen­ta­te in un formato grande in modo ac­cat­ti­van­te e in­te­rat­ti­vo. Grazie al design re­spon­si­ve, tutte le gallerie si adattano au­to­ma­ti­ca­men­te a diverse di­men­sio­ni dello schermo. Inoltre, gli utenti possono assegnare attributi rilevanti per la SEO, come titoli delle immagini e testi al­ter­na­ti­vi, per mi­glio­ra­re la vi­si­bi­li­tà nei motori di ricerca. Il plugin è di­spo­ni­bi­le per il download come modello in ab­bo­na­men­to sul sito web dello studio di sviluppo Fi­re­co­ders.

Gallerie di immagini per TYPO3

Anche TYPO3 è un sistema di gestione dei contenuti noto. Il CMS è un software molto am­plia­bi­le, che viene usato sia per siti web di di­men­sio­ni piccole o medie sia per soluzioni aziendali. Inoltre, fa af­fi­da­men­to su una vasta community. Tuttavia, TYPO3 non risulta una soluzione semplice, se non si hanno co­no­scen­ze pregresse su come rea­liz­za­re un sito web. Per poter usare pie­na­men­te i vantaggi del CMS, molte imprese investono nella for­ma­zio­ne di personale spe­cia­liz­za­to. Anche per quanto riguarda le gallerie di foto, ci sono alcune soluzioni pro­fes­sio­na­li per TYPO3.

Simple Image Gallery (bm_image_gallery)

L’esten­sio­ne TYPO3 Simple Image Gallery, ovvero bm_image_gallery, consente di creare fa­cil­men­te gallerie di immagini fles­si­bi­li e re­spon­si­ve. Gli utenti possono creare gallerie di­ret­ta­men­te dal file col­lec­tion di TYPO3, in modo che le immagini siano gestite cen­tral­men­te e possano essere riu­ti­liz­za­te in più gallerie. Facendo clic su un’immagine si apre, op­zio­nal­men­te, un lightbox che la mostra in formato grande e consente una na­vi­ga­zio­ne intuitiva nella galleria. Grazie al supporto di di­men­sio­ni di immagine per­so­na­liz­za­te e delle con­fi­gu­ra­zio­ni Ty­po­Script, è possibile adattare vi­sua­liz­za­zio­ne e layout delle gallerie alle ri­spet­ti­ve esigenze. L’esten­sio­ne è inoltre adatta per l’ot­ti­miz­za­zio­ne per i motori di ricerca, poiché per ogni immagine possono essere inseriti testi al­ter­na­ti­vi, titoli e de­scri­zio­ni. bm_image_gallery si integra nelle moderne in­stal­la­zio­ni di TYPO3 ed è di­spo­ni­bi­le per il download nello store delle esten­sio­ni di TYPO3.

ns_gallery

L’esten­sio­ne TYPO3 ns_gallery è una soluzione a pagamento per creare gallerie di immagini pro­fes­sio­na­li e slider mul­ti­me­dia­li. Supporta diversi layout, vi­sua­liz­za­zio­ni slider e funzioni di zoom, per­met­ten­do di adattare vi­si­va­men­te le gallerie in modo fles­si­bi­le al tuo web design. ns_gallery consente di gestire le immagini in album e categorie e supporta inoltre l’in­te­gra­zio­ne di video, ad esempio da YouTube.

Con funzioni come il lazy loading e il design re­spon­si­ve, vengono ot­ti­miz­za­ti sia i tempi di ca­ri­ca­men­to sia la vi­sua­liz­za­zio­ne sui di­spo­si­ti­vi mobili. L’esten­sio­ne offre inoltre funzioni lightbox complete. Può essere testata gra­tui­ta­men­te per 15 giorni e in seguito è di­spo­ni­bi­le come ab­bo­na­men­to annuale o ab­bo­na­men­to a vita sul sito ufficiale.

Aspetti delle gallerie di immagini rilevanti per la SEO

Le gallerie di immagini per i siti possono mi­glio­ra­re sen­si­bil­men­te la vi­si­bi­li­tà del tuo sito web nei motori di ricerca, se sono ot­ti­miz­za­te cor­ret­ta­men­te. Ciò include l’uso di nomi di file de­scrit­ti­vi, testi al­ter­na­ti­vi e de­scri­zio­ni delle immagini che rendono il contenuto delle immagini com­pren­si­bi­le ai motori di ricerca. Anche una vi­sua­liz­za­zio­ne re­spon­si­ve, tempi di ca­ri­ca­men­to rapidi grazie al lazy loading e di­men­sio­ni delle immagini ot­ti­miz­za­te con­tri­bui­sco­no alle pre­sta­zio­ni, con un effetto positivo sul ranking.

Checklist SEO per gallerie

✓ Assegnare a tutte le immagini nomi di file de­scrit­ti­vi

✓ Ag­giun­ge­re testi al­ter­na­ti­vi e titoli per la de­scri­zio­ne delle immagini

✓ Ot­ti­miz­za­re le immagini per tempi di ca­ri­ca­men­to rapidi (com­pres­sio­ne, lazy loading)

✓ Integrare di­men­sio­ni re­spon­si­ve per diversi di­spo­si­ti­vi

✓ Uti­liz­za­re dati strut­tu­ra­ti

✓ Se possibile, ag­giun­ge­re di­da­sca­lie o sot­to­ti­to­li

✓ Sfruttare i link interni verso contenuti per­ti­nen­ti