mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-11 12:11:45 +00:00
George Cushen
b67f09b8fd
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.
17 lines
285 B
YAML
17 lines
285 B
YAML
title: HugoBlox Test
|
|
baseURL: https://example.com
|
|
build:
|
|
buildStats:
|
|
enable: true
|
|
module:
|
|
imports:
|
|
- path: github.com/HugoBlox/kit/modules/blox
|
|
outputs:
|
|
home: [HTML, RSS, WebAppManifest]
|
|
disableAliases: true
|
|
taxonomies: []
|
|
markup:
|
|
_merge: deep
|
|
security:
|
|
_merge: deep
|