Convenzione immagini gallerie (repo l-e-a-p.github.io)
I post (_posts/) di questo repo pubblicano le gallerie usando immagini che vivono qui come file statici, sotto images/posts/. Organizzazione sempre uguale, una cartella per fotografo identificato dalla sua sigla:
images/posts/EVENTO/<sigla-fotografo>/org/ foto originali scattate (full-res) — NON pubblicate, sorgente
images/posts/EVENTO/<sigla-fotografo>/edit/ resize alleggerite, CON logo + nome del fotografo — aperte nel lightbox
images/posts/EVENTO/<sigla-fotografo>/thumb/ miniature mostrate nella griglia
org/, edit/, thumb/ contengono gli stessi nomi file. Questa struttura deve valere SEMPRE.
(NB: la vecchia cartella full/ è legacy, va rinominata in edit/.)
Sigle fotografo
ac= Alice Cortegianidt= Davide Tedesco- altre sigle in uso nei repo LEAP:
gmd,lz,gs - nome esteso da normalizzare a sigla:
marco-iacobucci
Uso nei post
Si imposta gallery_path nel front-matter e si fa un include per cartella-fotografo (il match thumb/ del motore NON è ricorsivo):
---
gallery_path: /images/posts/EVENTO/ac/
---
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<style>
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.25rem; margin:1rem 0; }
.gallery a { display:block; aspect-ratio:1; overflow:hidden; }
.gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.gallery a:hover img { transform:scale(1.04); }
</style>
<div class="gallery "></div>
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script>
(function () {
if (!window.__glightboxInit) {
window.__glightboxInit = true;
// Inizializza dopo il parsing completo: cosi raccoglie TUTTE le griglie
// anche quando ci sono piu include gallery nella stessa pagina.
var init = function () { GLightbox({ selector: '.glightbox', loop: true, touchNavigation: true }); };
if (document.readyState !== 'loading') { init(); }
else { document.addEventListener('DOMContentLoaded', init); }
}
// Il main.min.js del tema aggiunge data-lity a OGNI link immagine (al ready di
// jQuery), aprendo una seconda lightbox (Lity) sopra GLightbox. Lo togliamo dai
// link della griglia DOPO il load, quando quel tagging e gia avvenuto.
var strip = function () {
var links = document.querySelectorAll('.gallery a.glightbox[data-lity]');
for (var i = 0; i < links.length; i++) { links[i].removeAttribute('data-lity'); }
};
if (document.readyState === 'complete') { strip(); }
else { window.addEventListener('load', strip); }
})();
</script>
Il motore del tema (so-leap-theme/_includes/gallery) è source-agnostic: prende le miniature da thumb/ e le immagini complete del lightbox da edit/, scorrendo sia le collezioni sia i file statici di questo repo (site.static_files). Le immagini delle pagine delle collezioni (_lazzaro, _archi-di-pietra) stanno invece nei rispettivi submodule.
TODO futuro
Quando tutte le gallerie sono operative: automatizzare con uno script il watermark (logo + nome fotografo) sulle immagini in edit/ — finora fatto a mano con un programma a pagamento.