Display images along with comment boxes side by side

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.

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

createCols

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.

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

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

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.