WordPress Galleries: Fancybox, Captions, and Lazy Loading

WordPress galleries are powerful, but they need theme support to feel polished.

Boilerplate adds a practical media layer around WordPress gallery and image block markup: gallery links are prepared for Fancybox, captions are pulled from nearby figure/gallery metadata, standalone lightbox links are supported, thumbnail sources are improved, and lazy images stay lightweight.

Fancybox support

assets/js/fancybox.js scans WordPress gallery links, image block links, explicit .lightbox links, and existing data-fancybox links. Image URLs are normalized into data-src, image lightboxes get data-type="image", and improved thumb sources are assigned for cleaner Fancybox thumbnails. :contentReference[oaicite:0]{index=0}

Gallery links are grouped through Fancybox’s gallery binding. Standalone links receive their own lightbox grouping, so a single linked image can still open cleanly without needing to be inside a gallery.

Captions that survive real content

Captions are pulled from nearby WordPress markup first: figcaption, gallery captions, caption text, and block gallery captions. If that is missing, Boilerplate falls back to image metadata such as data-caption, title, or alt.

That keeps lightbox captions useful without forcing editors to duplicate the same caption data manually.

Theme-aware gallery styling

The media styling layer keeps galleries, captions, media players, thumbnails, and Fancybox UI aligned with Boilerplate’s color mode system.

assets/sass/parent_theme/media.scss routes gallery captions, lightbox backgrounds, caption text, caption borders, thumbnail bars, thumbnail focus states, and media player rails through runtime CSS variables. That means media output participates in the same light/dark color architecture as the rest of the theme.

assets/sass/parent_theme/images.scss handles the practical image side: WordPress image alignment, floating behavior, responsive image constraints, and mobile-friendly cleanup for editor-driven image layouts.

Lazy loading stays simple

assets/js/lazy.js handles images with the .lazy class. Modern browsers use IntersectionObserver; older browsers fall back to throttled scroll, resize, and orientation-change checks.

No heavy dependency. No giant media framework. Just enough behavior to keep image-heavy pages feeling sane.