Title here
Summary here
Hugo Grid-Gallery | Module
Ein Hugo Modul um eine sehr sehr große Anzahl von Bildern in einem Grid darzustellen. Das Modul kann man hier in Aktion bewundern:
Was ist das genau?
Hugo Grid Gallery ist ein Theme-unabhängiges Hugo-Modul für umfangreiche, responsive Bildersammlungen. Die Bilder bleiben in Hugo als Seitenressourcen erhalten; das Modul nutzt sie, um ein leistungsstarkes, ausgerichtetes Raster, eine Lightbox und optional vollständige Sammlungs-, Karten- und Kategorieansichten zu generieren.
Das Modul ist für Websites gedacht, die mehr als nur ein statisches Bildraster benötigen sondern eine große Anzahl von Bildern, mehrere miteinander verknüpfte Galerien mit separaten Metadaten, automatisch generierte Miniaturansichten, Sortierfunktionen und Navigation, ohne diese Logik an ein bestimmtes Hugo-Theme zu binden.
Funktionen
- responsives, ausgerichtetes Raster auf Basis einer erweiterten Version von Pig.js
- DOM-Virtualisierung für große Galerien: Bilder außerhalb des relevanten Scrollbereichs werden wieder entfernt
- progressive Bildanzeige mit einer kleinen 20-Pixel-Vorschau vor dem eigentlichen Rasterbild
- automatische Hugo-Bildvarianten in den Breiten 20, 100, 250 und 500 Pixel
- separat begrenzte Großbildversion für die Lightbox
- fsLightbox Basic standardmäßig im Lieferumfang enthalten, mit einer Consumer-Überschreibung für die Pro Version
- vollständige Lightbox-Navigation trotz DOM-Virtualisierung durch Pig.js
- optionales Wasserzeichen, das ausschließlich auf die große Lightbox-Version angewendet wird
- konfigurierbare Bildreihenfolge: normal, umgekehrt oder zufällig
- optionale Nummern-Badges, abgeleitet aus Bilddateinamen wie
photo-0042-view.jpg - mehrere Galerien als isolierte Sammlungen mit festen IDs
- Galeriekarten mit Titelbild, Bildanzahl, Beschreibung und Änderungsdatum
- Sortierung der Karten nach Titel, Bildanzahl oder Aktualisierungsdatum
- “Zuletzt aktualisiert”-Links und konfigurierbare Hervorhebung aktueller Galerien
- Kategoriekarten und virtuelle Kategorie-Raster, die sich über mehrere Leaf-Bundles erstrecken
- Navigation „Zurück/Weiter“ innerhalb derselben Sammlung und Rolle
- Rollenbasierte Filter für verschiedene Galeriegruppen
- Strenge Build-Validierung anstelle von stillen Pfad- oder Titel-Fallbacks
- Konfigurierbare benutzerdefinierte CSS-Eigenschaften und überschreibbare Hugo-Partials
- Lauffähige ExampleSite sowie Build-, DOM-, Browser- und visuelle Tests
Pig.js Erweiterungen
Pig.js berechnet ein responsives, zeilenbasiertes Bildlayout und virtualisiert den sichtbaren DOM-Bereich. Die beiden Funktionen bilden nach wie vor den Kern des Rasters. Pig.js selbst verfügt über keinerlei Kenntnisse hinsichtlich Hugo-Seitenressourcen, Bildverarbeitung, Sammlungen, Kategorien, Metadaten oder einer Lightbox.
Hugo-Grid-Gallery erweitert Pig.js um eine Hugo-spezifische Pipeline:
- Hugo sammelt die Bilder aus einem Leaf-Bundle oder aus mehreren Galerien in einer Kategorie.
- Die Bild-Pipeline generiert kleine Vorschau- und Rastervarianten sowie eine größenbegrenzte Lightbox-Version.
- Optional wird nur die Lightbox-Version mit einem Wasserzeichen versehen; die Raster-Miniaturansichten bleiben unverändert.
- Ein signiertes JSON-Asset übermittelt Abmessungen und URLs an den Browser und wird neu generiert, wenn sich der Bildsatz ändert.
- Die erweiterte Pig.js-Version verbindet das virtualisierte Raster mit fsLightbox. Versteckte Quellen sorgen dafür, dass alle Bilder in der Lightbox verfügbar bleiben, auch wenn Pig.js derzeit nur eine Teilmenge im DOM vorhält.
- Das Modul fügt Karten, Sortierfunktionen, Kategorien, Navigation, Anzeigen für „Zuletzt aktualisiert“ sowie den strengen Kollektionsvertrag hinzu.
Pig.js ist die Layout-Engine, und nicht die öffentliche API des Moduls. Inhalte und Themes interagieren ausschließlich über Hugo-Shortcodes, Front Matter, Metadaten und CSS-Variablen.