Skip to content

feat: add PhotoSwipe lightbox for blog post images#616

Merged
stasadev merged 2 commits intoddev:mainfrom
stasadev:20260420_stasadev_zoom_on_click
Apr 20, 2026
Merged

feat: add PhotoSwipe lightbox for blog post images#616
stasadev merged 2 commits intoddev:mainfrom
stasadev:20260420_stasadev_zoom_on_click

Conversation

@stasadev
Copy link
Copy Markdown
Member

@stasadev stasadev commented Apr 20, 2026

The Issue

Blog post images were not clickable or viewable fullscreen.

How This PR Solves The Issue

  • Adds PhotoSwipe v5 (MIT) lightbox to blog posts
  • Images in .prose are wrapped in PhotoSwipe anchors at runtime
  • Feature image opens in its original format (PNG/JPG/GIF), useful for high-quality artwork
  • Feature image dimensions are computed from metadata instead of hardcoded 900×500
  • Supports keyboard navigation and mobile swipe/pinch-to-zoom

Manual Testing Instructions

🤖 Developed with assistance from Claude Code

## The Issue

Blog post images were not clickable or viewable fullscreen.

## How This PR Solves The Issue

- Adds PhotoSwipe v5 (MIT) lightbox to blog posts
- Images in `.prose` are wrapped in PhotoSwipe anchors at runtime
- Supports keyboard navigation and mobile swipe/pinch-to-zoom

## Manual Testing Instructions

- Open `/blog/markdown-features-demo`
- Hover an image - cursor should show zoom icon
- Click an image - lightbox opens fullscreen
- Navigate with arrow keys or swipe on mobile
- Close with Escape or click outside

🤖 Developed with assistance from [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 20, 2026

🌐 Fork Preview for PR #616

https://pr-616.ddev-com-fork-previews.pages.dev

This preview updates automatically when you push changes to your fork.

Copy link
Copy Markdown
Member

@rfay rfay left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SO COOL, thank you!

@stasadev
Copy link
Copy Markdown
Member Author

I pushed one more commit - feature image opens in its original format (not WebP): https://pr-616.ddev-com-fork-previews.pages.dev/blog/ddev-jan-2026-newsletter/

@stasadev stasadev merged commit f5dfb53 into ddev:main Apr 20, 2026
2 checks passed
@stasadev stasadev deleted the 20260420_stasadev_zoom_on_click branch April 20, 2026 19:39
@github-actions
Copy link
Copy Markdown

PR closed. The Cloudflare Pages preview is no longer updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants