Grid of images with the same height?

[Marisa_Smith]

Hi @vclugoar,

First, Welcome to the Streamlit community!

I think your nearly there on a solution honestly! My first question is will you be recommending the same number of books each time? I see 8 books recommended, 2 rows of 4, If that number is the same always, then I think we can work out a relatively simple solution using columns.

I have done something similar to this before in this post:

Table of media (pictures or audio)

Hey @29f3j092j3f0j Yes you can absolutely embed media into your streamlit app. In fact with then new st.beta_columns() function in streamlit you can make a table of columns on your page and put media in each of the cells of your table! import streamlit as st st.title('Table of media') # to get different images/media in the rows and columns, have a systematic # way to label your images/media. For mine, I have used row_{i}_col_0/1 # also note that different media types such as an audio or vid…

In your case, you don’t need the st.beta_container(), just the st.beta_columns(). I also think my answer here could be improved by making a list/iterable of the filtered images (I think that’s your image names?) that has the correct shape…

For example, if you always recommend 8 then you have 4 columns and 2 rows. So you would make a list/iterable like this:

list = [[column_1_row_1_image, column_1_row_2_image ], 
          [column_2_row_1_image, column_2_row_2_image],
          [column_3_row_1_image, column_3_row_2_image],
          [column_4_row_1_image, column_4_row_2_image] ]

and then you can systematically select the correct image this way!

This will line all the images up by their tops, but won’t make all the images the same height. The only way to do that is to run some image processing (Streamlit won’t crop your images off for you).

But, people expect books (and covers) to be different sizes, So I think if you can get them lining up at the tops and nice and clean then this will look a lot better and solve your problem!

Happy Streamlit-ing!
Marisa