Multiple Images along the same row

Hi,

How can I present 2 images in the same row?

I’ve tried

st.image([image1,image2])

and

st.image(image1)
st.image(image2)

Both gives me the same result of images in a column.

1 Like

Update: I found that wide mode resolves this. However, im wondering if there are other ways to go about it?

How do you do it with wide please ?

2 Likes

use this st.image([image1,image2]) and go to the running instance on the browser -> settings -> Show app in wide mode.

1 Like

Thanks for the great answer @yshvrdhn and welcome to the Streamlit community @zhun_t! :heart:

Please note that st.image also takes a width parameter which you can use to fit more pictures in a row.

We also have plans to add more layout primitives to Streamlit. Please feel free to follow that issue to track its progress and add comments with addition use cases for us to consider.

@Adrien_Treuille thank you ! and kudos for building such an amazing tool :). Hi I was wondering if there is an example for pagination for viewing 1000 images say 10 at a time or so ?

Yes. I’m working on a short pagination example now. Will share with you when I’m done!

…and thanks for the compliment! :blush: We’re happy to have you as a user, @yshvrdhn!

Hi @yshvrdhn!

One way to do image pagination would be to copy-paste the paginator function from this gist and use it as follows:

sunset_imgs = [
    'https://unsplash.com/photos/-IMlv9Jlb24/download?force=true',
    'https://unsplash.com/photos/ESEnXckWlLY/download?force=true',
    'https://unsplash.com/photos/mOcdke2ZQoE/download?force=true',
    'https://unsplash.com/photos/GPPAjJicemU/download?force=true',
    'https://unsplash.com/photos/JFeOy62yjXk/download?force=true',
    'https://unsplash.com/photos/kEgJVDkQkbU/download?force=true',
    'https://unsplash.com/photos/i9Q9bc-WgfE/download?force=true',
    'https://unsplash.com/photos/tIL1v1jSoaY/download?force=true',
    'https://unsplash.com/photos/-G3rw6Y02D0/download?force=true',
    'https://unsplash.com/photos/xP_AGmeEa6s/download?force=true',
    'https://unsplash.com/photos/4iTVoGYY7bM/download?force=true',
    'https://unsplash.com/photos/mBQIfKlvowM/download?force=true',
    'https://unsplash.com/photos/A-11N8ItHZo/download?force=true',
    'https://unsplash.com/photos/kOqBCFsGTs8/download?force=true',
    'https://unsplash.com/photos/8DMuvdp-vso/download?force=true'
]
image_iterator = paginator("Select a sunset page", sunset_imgs)
indices_on_page, images_on_page = map(list, zip(*image_iterator))
st.image(images_on_page, width=100, caption=indices_on_page)

In fact, you can try this right now by running:

streamlit run https://gist.githubusercontent.com/treuille/da70b4888f8b706fca7afc765751cd85/raw/0727bb67defd93774dae65a2bc6917f72e267460/image_paginator.py

This is what you will see:


2 Likes

Hi @Adrien_Treuille, thank you for the response! Appreciate it!

Hi @Adrien_Treuille, great function, thank you. Small question. Is it possible to add legends for each display image (for instance, the filename)?

Hi @casfranco - We have an option for st.image called caption.

st.image(images_on_page, width=200, caption=images_on_page)

images_on_page is a list of names you want to display as legends