Multiple Images along the same row

🎈 Using Streamlit
1

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.

3 Likes
2

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

3

How do you do it with wide please ?

2 Likes
4

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

1 Like
5

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.

6

@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 ?

7

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!

8

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:

image
image.jpg2278×1318 410 KB

image
image.jpg2278×1318 272 KB

4 Likes
9

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

10

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

11

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

12

Is there a way to show ~100 images in a paginated way, ideally without reloading the whole page every time a next page is selected?

13

Hey @Venkatesh_S, thanks for your input.

I keep getting an error when I try to do a caption with multiple images though. For example:

images = ['P2100483.JPG', 'P2100486.JPG', 'P2100488.JPG']
st.image(images, use_column_width=True, caption="some generic text")

AssertionError: Cannot pair 1 captions with 4 images.

Does this mean the caption passed needs to be a list of the same size as the image list? Do you know if you could pass one (same) caption for all images, without it being a list?

Many thanks :slight_smile:

14

yes.

You can do it like this:

images = ['P2100483.JPG', 'P2100486.JPG', 'P2100488.JPG']
st.image(images, use_column_width=True, caption=["some generic text"] * len(images))
1 Like