mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-20 00:14:48 +00:00
feat(gallery): add gallery block with grid/masonry layouts and lightbox
First-class image gallery block. Two layouts ship today - grid (uniform tiles, configurable columns 1-6, aspect-ratio presets) and masonry (CSS-columns Pinterest packing). Click-to-zoom lightbox built in Preact, portalled to <body> so it escapes the section's `isolation: isolate` stacking context; keyboard navigation (← → Esc), touch swipe, and body scroll-lock included. Two source modes: explicit items[] for curated galleries with per-image captions/credits/links, or album: <folder> for drop-in folder loading sorted by filename. Remote URLs (Unsplash/Pexels/CDNs) are passed through unprocessed; local images get the full responsive variants + inline base64 LQIP placeholder for instant first-paint over the eventual sharp image. Captions, titles, and credits are rendered through Hugo's RenderString at build time (display: inline) - users get full Markdown (bold/italic/ code/links) in any of those fields with zero JS markdown parser. Alt text falls back to plainified caption → humanised filename so screen readers always have something useful. Caption positions: below (default - accessibility-first), overlay (magazine gradient), hover (clean grid reveal), none (lightbox-only). Block-scoped CSS in the co-located style.css is picked up by the existing block-CSS auto-discovery. Test site: two demos under home.yaml (curated grid + auto-loaded masonry) with 9 sample Picsum images stored under test/assets/media/albums/gallery/ at varied aspect ratios.
This commit is contained in:
1 parent
4de0ad0af9
commit
b67f09b8fd
17 files changed
+725
-13
No files matched your search
+1
-9
@@ -1,4 +1,4 @@
|
||||
title: Hugo Blox Test
|
||||
title: HugoBlox Test
|
||||
baseURL: https://example.com
|
||||
build:
|
||||
buildStats:
|
||||
@@ -14,11 +14,3 @@ markup:
|
||||
_merge: deep
|
||||
security:
|
||||
_merge: deep
|
||||
params:
|
||||
header:
|
||||
navbar:
|
||||
enable: false
|
||||
extensions:
|
||||
cms:
|
||||
local_backend: true
|
||||
publish_mode:
|
||||
Reference in new issue
Block a user