In passato, su alcuni siti web "statici", avevo generato gallerie fotografiche o completamente a mano oppure con l'aiuto di kalbum, ad esempio questo album era fatto con kalbum, mentre quest'altro era fatto manualmente, e quest'altro ancora era fatto in parte a mano e in parte con kalbum.
Le soluzioni per generare album fotografici su siti web statici sono molte, nella discussione intitolata "How to generate web picture gallery offline? (no php on server)" sono presentate varie alternative.
Il problema è che l'ultima versione di kalbum risale al 2004 e ormai non è più incluso né utilizzabile con distribuzioni GNU/Linux recenti.
Come suggerito nella discussione "Q: replacement for kalbum?", ci sono comunque varie alternative a kalbum. La prima soluzione indicata, ovvero installare gwenview insieme a kipi-plugins (che ho installato tramite il gestore pacchetti Synaptic), è molto carina e presenta varie alternative nella generazione dell'album, fornendo alcuni temi tra cui scegliere. Per installarli da terminale, avrei potuto dare il comando:
sudo apt-get install gwenview kipi-plugins
Il risultato ottenuto è stato molto professionale, ho usato il tema "Floating cards" di Jiří Boháč; ho avuto bisogno di fare solo alcune piccole personalizzazioni al codice generato.
La prima è stata quella di rimuovere tutte le didascalie (corrispondenti al nome dell'immagine). Non so se in fase di generazione dell'album avrei potuto evitare l'inserimento del nome del file sotto ad ogni foto (ogni tema tra quelli selezionabili in fase di creazione dell'album può avere una o più opzioni), comunque ho risolto con questi due comandi da terminale:
perl -pe 's/<br \/>.*?<\/a>/<\/a>/' index.html > index.html.new mv index.html.new index.html
La logica dietro a tale approccio parte dell'osservazione che ogni immagine era inserita nell'index.html con un codice come il seguente:
<li> <a href="fotografie/1_massa_marittima_jpg.jpeg.html"><img src="fotografie/thumb_1_massa_marittima_jpg.jpeg" alt="" /><br />1: 1_Massa_Marittima.jpg</a> </li>
Io non ho fatto altro che dire a Perl, utilizzando una regex (regular expression): leggi il contenuto del file e sostituisci "ogni stringa di testo che inizia con <br /> e finisce con </a>" (utilizzando un approccio lazy, ovvero scegliendo la stringa più corta possibile) con "</a>", ottenendo questo risultato:
<li> <a href="fotografie/1_massa_marittima_jpg.jpeg.html"><img src="fotografie/thumb_1_massa_marittima_jpg.jpeg" alt="" /></a> </li>
Nel file thumb_size.css ho poi ridotto la dimensione dell'anteprima di ogni foto (in quanto la didascalia non è più presente), sostituendo:
li {
width: 140px;
height: 160px;
}con:
li {
width: 140px;
height: 141px;
}Infine, nel file index.html, ho personalizzato il footer (inserendo i nomi degli autori e una nota di copyleft), l'ho ripetuto nell'intestazione e nel file floating_cards/style.css ho modificato la classe p.footer e fatto altre piccole personalizzazioni.
Ecco il risultato:
http://www.massamarittima-toscana.net/fotografie/
Un tocco di classe con jQuery
Non mi sono accontentato della galleria così ottenuta e sono andato oltre... ho fatto in modo che tutte le fotografie che vengono aperte riadattino le proprie dimensioni a quelle della finestra del browser (in particolare in base allo spazio verticale disponibile nella pagina), in modo da non obbligare chi naviga a dover fare uno scroll di ciascuna fotografia per poterla vedere. La soluzione scelta riadatta le dimensioni delle fotografie anche quando la finestra del browser viene ridimensionata. Il fatto di adattare l'immagine allo spazio verticale disponibile piuttosto che a quello orizzontale è una scelta dettata dalla considerazione che lo spazio orizzontale disponibile è di solito di gran lunga maggiore rispetto a quello verticale.
In sintesi, ho fatto alcune piccole modifiche al foglio di stile e nell'unico file javascript che viene richiamato da tutte le pagine ho incluso la versione più recente di jQuery 1.x e una versiona da me modificata di jquery.imagefit di Oliver Boermans (la versione originale adatta le immagini allo spazio orizzontale invece che a quello verticale). Ho notato che in generale il risultato è molto buono sia su Firefox sia su varie versioni di Internet Explorer, mentre è un po' meno buono su Chrome (che ha un leggero ritardo nel ridimensionamento delle immagini).
Per leggere il codice, basta visitare la galleria fotografica sopra linkata e aprire il codice sorgente con il proprio browser.
Altre personalizzazioni
Happy hacking a tutti,
Francesco Galgani