PostImages

Location: src/components/post-parts/PostImages.jsx

Overview

PostImages renders an adaptive image gallery within a post card. The layout changes based on the number of images: single image at full width, two images side by side, three in a 1+2 arrangement, and four or more in a 2x2 grid with a "+N" overlay for additional images.

Clicking any image triggers the lightbox via the onImageClick callback. All click events stop propagation to prevent the parent post card's navigation handler from firing.

Props

Prop	Type	Required	Default	Description
images	string[]	Yes	--	Array of image URLs to display
onImageClick	function	Yes	--	Callback receiving (index, triggerElement) when an image is clicked

Layout Rules

Image Count	Layout	CSS Class
0	Nothing rendered	--
1	Single full-width image	post-images-1
2	Two images side by side	post-images-2
3	One large image + two smaller stacked	post-images-3
4+	2x2 grid; 4th image shows "+N" overlay for extras	post-images-4

Key Behaviors

• Adaptive Grid: The component selects the appropriate layout based on images.length.
• Overflow Indicator: When there are more than 4 images, only 4 are displayed with a "+N" overlay on the last one showing how many more exist.
• Click Handling: Each image is a <button> element for accessibility. Clicks call onImageClick(index, element) where the element is used for lightbox focus return.
• Event Isolation: All click events call e.stopPropagation() to prevent the post card from navigating to the detail view.

Usage

import PostImages from '@/components/post-parts/PostImages';

<PostImages
  images={imageUrls}
  onImageClick={(index, trigger) => openLightbox(index, trigger)}
/>

Related

• Post -- Parent component that renders PostImages
• Lightbox -- Full-screen image viewer opened by clicking images
• PostDetail -- Has its own inline image gallery

---

Last updated: 2026-02-07