Register click events (on images)

Using Streamlit
1

Is there a way to register a click on an image that is displayed in the main section? I need to know when a particular image was selected.

Context: I’m building an app that displays a grid of images, where every single one can be selected and results in an action. I understand the st.grid() is currently in development. I also found out that multiple images can be displayed in a row by feeding a list into st.image(). The last piece to the puzzle I need, is to register which image was clicked. Checkboxes would be an option too, but AFAIK they cannot be displayed in a row.

Thanks.

3 Likes
2

Hi @pietz,

That’s an interesting question, and I can see exactly why you would want it, e.g. to gather user data to train a classifier. I will file a feature request about this, because it’s worth talking about at least.

Right now I don’t think Streamlit can give you that ability directly, although you could (similarly to things you’re probably already thinking) set up a parallel input structure to the images and have the user click on those in association with the images. For example:


images = [...]

pick_img = st.sidebar.radio("Which image?", 
           [x for x in range(1, len(images))])

st.image(images)

# do something with what the user selected here
if pick_img:
    ....

I know this is not as visually satisfying as colocating the user’s click with the image, but it’s a start until we have grid layouts going…!

1 Like
3

Here’s the new feature request:

4

Thanks for your response and opening the request :slight_smile:

The snippet you’re suggesting would be a possible workaround if:

  • that would work for checkbox too (I need N out of M selected)
  • there would be a horizontal / inline option for it
1 Like