Hi all!
My recent app created as an output an image grid. Since the images were all different sizes and aspect ratios, it was hard to show them all at once. Putting st.image only showed a few at a time.
As a solution I was able to create a little component that used a CSS “masonry” image board and use it using st.components.v1.html. I thought it might be useful to the rest of the community, so check out the examples below and the code here.
Hey @metasemantic,
Your girds of pictures look fantastic! Thanks for sharing with the rest of us!
Happy Streamlit-ing!
Marisa
Omg. This is amazing @metasemantic . 
I wonder if this could be abstracted into a component to put in the components gallery?
Holey moley. I just realized how you did this by running a server in the background. I’ve never seen this architecture before! I’m sharing with the team over here at Streamlit. Thank you, @metasemantic !
Maybe? It’s really not that hard to do. Thankfully, this is one of those cases where it makes sense to put everything in an iframe!
I needed to get a server in the background for the pytorch model in this app:
https://share.streamlit.io/thoppe/alph-the-sacred-river/main
Otherwise it was too unwieldy to load it every time. I like the idea though, since it abstracts it away and I don’t have to worry about Streamlit caching it/leaking it.
I’m actually working with Amanda Kelly to put a blog post out about this very sort of abstraction! A draft was submitted, I’m waiting on the next steps / revisions.
Totally get that it’s not that hard to do. I was thinking more about discoverability.
We plan to feature great components better, e.g. by weaving them throughout our documentation. So encapsulating this as a component makes it easier to find for someone looking to display images.
Anyway, no pressure. I was just super enthusiastic about this work and thinking out loud! 
Great stuff! 
