Add an image gallery in the screenshot metadata dialog #178

New Issue

MrUnknownDE · 2026-04-05T16:16:32+02:00

MrUnknownDE commented

2026-04-05 16:16:32 +02:00

Originally created by @dakyneko on 12/7/2025

This PR introduces a new minimalist gallery that shows all pictures supported by VRCX. This is a first initial implementation and I think we need some improvements before merging but it's functional to give an idea what's possible. We should discuss the changes to go forward. Preview how it looks with a search filter:

The current implementation is very simplistic with only a few minor changes:

Refactor the logic for getting the file list into a new GetScreenshotsList that can be used by the gallery
Receiving the list through a Promise and showing all pictures with html lazy loading.

Further improvements to discuss:

Designwise: how to make it nicer to use. We could check other image gallery software and mimick their design. The gallery can take a lot of space and it would be nicer in full screen before then when we click we show the selected image fullscreen too. However we can take another approach where we show the selected picture big and below we can show the gallery as a scrollable horizontal row.
- Where to put the "drag and drop" box? Where to put all the image information: below, above the image/gallery? Do we need all those information? Could we put it on the side instead?
- I think the image viewer should be a new tab in the app: it deserves space it could be a big feature in the future: Organizing and browsing screenshots in VRC with lots of VRCX features.
Ensure low memory usage: only load a portion of image. Currently I used <img loading="lazy" for now but maybe we want to do pagination, lazy scrolling or similar ideas?
Group images by dates: it would be easier to see images grouped when they were taken. It could be grouped by day: have chunks of images with a title (date of taken) and the corresponding images below. We can also group by week, month etc. We could also group by world. Maybe those would be new options in the UI.

Feel free to give suggestions. Natsumi suggested I open this PR in the current state.

*Originally created by @dakyneko on 12/7/2025* This PR introduces a new minimalist gallery that shows all pictures supported by VRCX. This is a first initial implementation and I think we need some improvements before merging but it's functional to give an idea what's possible. We should discuss the changes to go forward. Preview how it looks with a search filter: <img width="958" height="802" alt="image" src="https://github.com/user-attachments/assets/02f37bb1-0148-40b2-8841-94526750c871" /> The current implementation is very simplistic with only a few minor changes: - Refactor the logic for getting the file list into a new GetScreenshotsList that can be used by the gallery - Receiving the list through a Promise and showing all pictures with html lazy loading. Further improvements to discuss: - Designwise: how to make it nicer to use. We could check other image gallery software and mimick their design. The gallery can take a lot of space and it would be nicer in full screen before then when we click we show the selected image fullscreen too. However we can take another approach where we show the selected picture big and below we can show the gallery as a scrollable horizontal row. - Where to put the "drag and drop" box? Where to put all the image information: below, above the image/gallery? Do we need all those information? Could we put it on the side instead? - I think the image viewer should be a new tab in the app: it deserves space it could be a big feature in the future: Organizing and browsing screenshots in VRC with lots of VRCX features. - Ensure low memory usage: only load a portion of image. Currently I used `<img loading="lazy"` for now but maybe we want to do pagination, lazy scrolling or similar ideas? - Group images by dates: it would be easier to see images grouped when they were taken. It could be grouped by day: have chunks of images with a title (date of taken) and the corresponding images below. We can also group by week, month etc. We could also group by world. Maybe those would be new options in the UI. Feel free to give suggestions. Natsumi suggested I open this PR in the current state.

MrUnknownDE added the Stale Stale Stale Stale labels 2026-04-05 16:16:32 +02:00

Sign in to join this conversation.

No Label Stale Stale Stale Stale

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/VRCX#178