mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 08:14:33 +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.
HugoBlox Kit Modules
Install HugoBlox features as Hugo Modules.
Quick start (most sites)
Add HugoBlox Kit core to config/_default/module.yaml (or hugo.yaml):
module:
imports:
- path: github.com/HugoBlox/kit/modules/blox
That’s it — analytics is already included when you use modules/blox.
Module map
- Core framework:
github.com/HugoBlox/kit/modules/blox- Layouts, blocks (Blox), Tailwind pipeline, shortcodes, defaults
- Includes:
github.com/HugoBlox/kit/modules/analytics
- Slides (content type):
github.com/HugoBlox/kit/modules/slides- Markdown slide decks (powered by Reveal.js)
- Integrations:
github.com/HugoBlox/kit/modules/integrations/*- Netlify:
github.com/HugoBlox/kit/modules/integrations/netlify
- Netlify:
Optional installs
Slides
module:
imports:
- path: github.com/HugoBlox/kit/modules/blox
- path: github.com/HugoBlox/kit/modules/slides
Netlify integration (security headers + redirects outputs)
module:
imports:
- path: github.com/HugoBlox/kit/modules/blox
- path: github.com/HugoBlox/kit/modules/integrations/netlify
Then enable Hugo outputs for Netlify:
outputs:
home: [HTML, RSS, headers, redirects]
Updating
hugo mod get -u github.com/HugoBlox/kit/modules/blox@main
hugo mod tidy