mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 05:02:17 +00:00
feat: add grid view mode for multi-image batches in ImagePreview (#9241)
## Summary Add grid view mode for multi-image batches in ImagePreview (Nodes 2.0), replicating the Nodes 1.0 grid UX where all output images are visible as clickable thumbnails. ## Changes - **What**: Multi-image batches now default to a grid view showing all thumbnails. Clicking a thumbnail switches to gallery mode for that image. A persistent back-to-grid button sits next to navigation dots, and hover action bars provide gallery toggle, download, and remove. Replaced PrimeVue `Skeleton` with shadcn `Skeleton`. Added `viewGrid`, `viewGallery`, `imageCount`, `galleryThumbnail` i18n keys. ## Review Focus - Grid column count strategy: fixed breakpoints (2 cols ≤4, 3 cols ≤9, 4 cols 10+) vs CSS auto-fill - Default view mode: grid for multi-image, gallery for single — matches Nodes 1.0 behavior - `object-contain` on thumbnails to avoid cropping (with `aspect-square` containers for uniform cells) Fixes #9162 <!-- Pipeline-Ticket: f8f8effa-adff-4ede-b1d3-3c4f04b9c4a0 --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9241-feat-add-grid-view-mode-for-multi-image-batches-in-ImagePreview-3136d73d36508166895ed6c635150434) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Alexander Brown <448862+DrJKL@users.noreply.github.com> Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
@@ -34,6 +34,8 @@
|
||||
"imageLightbox": "Image preview",
|
||||
"imagePreview": "Image preview - Use arrow keys to navigate between images",
|
||||
"videoPreview": "Video preview - Use arrow keys to navigate between videos",
|
||||
"viewGrid": "Grid view",
|
||||
"imageGallery": "image gallery",
|
||||
"galleryImage": "Gallery image",
|
||||
"galleryThumbnail": "Gallery thumbnail",
|
||||
"previousImage": "Previous image",
|
||||
|
||||
Reference in New Issue
Block a user