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! 
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
