We have introduced a smart gallery system that automatically organizes your note attachments into a clean, professional grid. This update ensures that your visual content is always presented consistently without cluttering your interface. The single image looked empty.
| Photo Count | Layout |
|---|---|
| 1 photo | Single 200×200 square |
| 2 photos | 2×1 grid of squares |
| 3 photos | 2×1 grid — 3rd photo hidden |
| 4+ photos | 2×2 grid of squares |
All cells use position: absolute + objectFit: cover to crop images into perfect squares with no gaps or stretching.
+N Badge
When there are more than 4 photos, a small semi-transparent badge (e.g. +8) appears in the bottom-right corner of the 4th photo — it doesn't obscure the image.
Lightbox
Clicking any photo opens a full-screen lightbox (yet-another-react-lightbox) showing all photos for that note — not just the ones visible in the grid. Photos can be navigated with arrows or keyboard.
Default Photo Priority
The attachment marked is_default: true (or the first attachment as fallback) is always placed first in both the grid preview and the lightbox. Other photos follow in order.
Image Dimension Loading
Actual image dimensions are loaded asynchronously via new Image() and stored in state — used to inform the lightbox display. The gallery preview itself uses fixed square dimensions for consistency.