Full-Screen Photo Gallery with PhotoSwipe

The gallery: true flag loads PhotoSwipe v5 — a lightweight, mobile-friendly lightbox with swipe, keyboard navigation, and caption support.

Wrap each image in an <a> tag with data-pswp-width and data-pswp-height attributes. PhotoSwipe scans #post-content for these links on page load.

Basic Grid Gallery

Six images in a three-column grid — click any image to open the lightbox:

Gallery with Captions

Add data-pswp-caption to each <a> tag to show captions in the lightbox:

Masonry-Style Mixed Gallery

Portrait and landscape images mixed together — PhotoSwipe handles all aspect ratios:

Usage

---
title: My Photo Post
gallery: true
---

<a href="/assets/img/full-size.jpg"
   data-pswp-width="1920"
   data-pswp-height="1080"
   data-pswp-caption="Optional caption text">
  <img src="/assets/img/thumb.jpg" class="img-fluid no-zoom" alt="Description" />
</a>

PhotoSwipe initialises automatically on #post-content — no additional JavaScript needed. The data-pswp-width and data-pswp-height must match the actual dimensions of the full-size image at href. Add class="no-zoom" on the thumbnail <img> to prevent medium-zoom from also intercepting the click.