It would be great if Retool included an image gallery component , or some way to visualize an album of images.
I’m thinking something along the lines of:
Display image thumbnails in a grid
Clicking on an image opens up a modal / lightbox where you can see the image in greater detail.
Ideally, can use left and right arrows to navigate if the modal is open
Or is there a simple way to build something like this using already available components? I’m currently envisioning the workaround being:
Creating a custom component for the image grid. Use material-ui GridList or something along those lines. CustomComponent is needed because there’s no simple way to create a grid within Retool, is there?
Create a Modal element in Retool. Creating a modal within the CustomComponent doesn’t work because then the modal would just open within the iframe, as opposed to the entire screen.
Clicking on an image inside the custom component opens the Retool modal. This is not hard to do, but non trivial.
Hey @maurizio! Thanks for the detailed post, this is really helpful!
If you want to avoid a custom component, you could probably get this to work with a ListView component. It wouldn’t be horizontal, but you could render an image for each image you want to see, and then create a JS Code query that opens a modal and runs when you click the image.
Got it. I managed to hack something together with a CustomView using the approach described in the original post and it works well enough for my use case. Just wanted to make this feature suggestion in case it’s useful to others (e.g. customer support team visualizing product images uploaded by users).
For context, the reason why I didn’t end up using ListView is because I wanted the images to be displayed in a grid (e.g. 4 thumbnails per row) and wanted multiple grids (one for each product feedback category that we want to visualize). I think it might be possible to create a grid using ListView – e.g creating 4 different listviews, one for each column – but having multiple listviews nested within each row of a listview is a bit messy.
I want to do the exact same thing and I'm facing some issues can you tell me more about how you managed to solve the problem ? I'm new to Retool and would appreciate some help. Thank you!
