Display images along with comment boxes side by side

[Pranayreddy_dasari]

I’m unable to align image with the comment box associated with the image in the same row.

I have hundred images and each image have comment box and button with it.

  c1,mid,c2 = st.beta_columns([2,1,3])
  for blob in blob_items:
  blob_client = container_client.get_blob_client(blob=blob.name)
  c1.image(blob_client.url)
  title = c2.text_input('Comments',key =blob_client.url )
  if c2.button('Save Me', key=blob_client.url):
      c2.write(title)

how could I align the text boxes along with the associated images.

[edsaac]

How about getting the st.columns inside the for loop?

import streamlit as st

captions = list(range(300,1200,100))
blob_items = [f"https://dummyimage.com/400x{w}/d4c9d4/3740bd.jpg&text=IMG_{w}" for w in captions]

for blob in blob_items:
    c1,mid,c2 = st.columns([2,1,3])
    c1.image(blob)
    title = c2.text_input('Comments',key=blob+"title")
    if c2.button('Save Me', key=blob+"save"):
        c1.write(title)

But i guess if you have hundreds of photos, this might not be the best solution.

[Pranayreddy_dasari]

Thank you @edsaac, It worked but it has increased the render time and application started to lag.

[Shawn_Pereira]

Hi @Pranayreddy_dasari

@edsaac proposed the ideal way. But if you are facing a lag, you could try this:

After each button in the 2nd column, you could issue either an empty st.write / st.text / st.caption. Eg. st.write(‘’) within a sub-loop. The iteration count of this sub-loop needed should be around 7 (going by your pix). You will have to find this by trial.

Btw,

1. You can use st.columns instead of st.beta_columns &
2. Instead of the variable ‘mid’, you can use the column gap.
   However, you will need to have the latest version of Streamlit