Skip to content

feat(blog): add clickable images that link to full-size versions#56

Merged
CalvinAllen merged 3 commits intomainfrom
feat/blog/clickable-images
Jan 29, 2026
Merged

feat(blog): add clickable images that link to full-size versions#56
CalvinAllen merged 3 commits intomainfrom
feat/blog/clickable-images

Conversation

@CalvinAllen
Copy link
Collaborator

@CalvinAllen CalvinAllen commented Jan 29, 2026

Summary

  • Click any image in a blog post to open it in a styled lightbox
  • Serves original unoptimized images for full-resolution viewing
  • Lightbox features:
    • Header with title and close hint
    • Blue-bordered container with subtle glow
    • Prominent close button
    • Footer with instructions
    • Backdrop blur effect
  • Close via X button, clicking outside image, or pressing Escape
  • Hover effects (scale + shadow + zoom cursor) indicate images are clickable

How it works

  1. copy-originals.js runs before dev/build and copies source images to public/originals/
  2. Client-side script wraps prose images with click handlers
  3. On click, maps the Astro-optimized URL back to the original and displays in lightbox

Test plan

  • Run npm run dev and visit a post with images
  • Verify hover effect on images (scale, shadow, zoom cursor)
  • Click image and verify lightbox opens with full-size original
  • Test closing via X button, clicking outside, and Escape key
  • Verify original image is larger/higher quality than embedded version

Adds a rehype plugin that wraps markdown images in anchor tags pointing
to the original image. Images open in a new tab and have a subtle
zoom-in cursor and hover effect to indicate clickability.
- Click any image in a blog post to open it in a lightbox
- Serves original unoptimized images for full resolution viewing
- Adds copy-originals script to copy source images to public folder
- Lightbox includes header, bordered container, and close instructions
- Close via X button, clicking outside, or pressing Escape
- Subtle hover effects on images indicate clickability
@CalvinAllen CalvinAllen merged commit 8892e35 into main Jan 29, 2026
2 checks passed
@CalvinAllen CalvinAllen deleted the feat/blog/clickable-images branch January 29, 2026 14:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant