Answer: Applying paginator to images

image_paginator.py

import streamlit as st
import itertools

def paginator(label, items, items_per_page=10, on_sidebar=True):
    """Lets the user paginate a set of items.

    Parameters
    ----------
    label : str
        The label to display over the pagination widget.
    items : Iterator[Any]
        The items to display in the paginator.
    items_per_page: int
        The number of items to display per page.
    on_sidebar: bool
        Whether to display the paginator widget on the sidebar.
        
    Returns
    -------
    Iterator[Tuple[int, Any]]
        An iterator over *only the items on that page*, including
        the item's index.

    Example
    -------
    This shows how to display a few pages of fruit.
    >>> fruit_list = [
    ...     'Kiwifruit', 'Honeydew', 'Cherry', 'Honeyberry', 'Pear',
    ...     'Apple', 'Nectarine', 'Soursop', 'Pineapple', 'Satsuma',
    ...     'Fig', 'Huckleberry', 'Coconut', 'Plantain', 'Jujube',
    ...     'Guava', 'Clementine', 'Grape', 'Tayberry', 'Salak',
    ...     'Raspberry', 'Loquat', 'Nance', 'Peach', 'Akee'
    ... ]
    ...
    ... for i, fruit in paginator("Select a fruit page", fruit_list):
    ...     st.write('%s. **%s**' % (i, fruit))
    """

    # Figure out where to display the paginator
    if on_sidebar:
        location = st.sidebar.empty()
    else:
        location = st.empty()

    # Display a pagination selectbox in the specified location.
    items = list(items)
    n_pages = len(items)
    n_pages = (len(items) - 1) // items_per_page + 1
    page_format_func = lambda i: "Page %s" % i
    page_number = location.selectbox(label, range(n_pages), format_func=page_format_func)

    # Iterate over the items in the page to let the user display them.
    min_index = page_number * items_per_page
    max_index = min_index + items_per_page
    return itertools.islice(enumerate(items), min_index, max_index)

def demonstrate_image_pagination():
    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)


if __name__ == '__main__':
    demonstrate_image_pagination()

Great function @treuille, thank you!. Small question. How can I add labels (filenames) to each picture instead of numbers? Is it possible with this implementation?

Yes, @casfranco. The key is to change the captions argument to st.image.

Hi @treuille, I ve just started learning streamlit. can you enlighten me how to add local images in the above list.?
More precisely, enlighten me, how to do the following: I uploaded 40 images in google colab. But I don't know how to add those images in the list of
def demonstrate_image_pagination():
sunset_imgs = [.......].
My aim is, instead of your images I wanted to display the images which I uploaded in google colab. I used ngrok to view your code. It works good. But how to display those set of images instead of yours. Kindly help me to know, I searched a lot over internet. But couldn't find out how to display those local images (under file browser menu, I uploaded) in google colab.

Hi @Terre10. Thanks for reaching out and for using Streamlit! 🙂 Honestly, this sound mostly like a colab question, which I’m not super familiar with. I’d suggest posting this question on our forums. Lots of friendly people could help you there.

Hi @treuille, thank you for your reply and suggestion. Atleast may I know how to add local images available in streamlit of this code when I run using ngrok url? For example, there are 40 images in a folder(called my_folder), i would like to add in this place,
def demonstrate_image_pagination():
sunset_imgs = [...40 local images....]..
May i know the way?. Sorry to bother you, if it is not worthy to ask here.

@Terre10: I‘m not sure what “local” means in colab, nor what ngrok url is. Any images that you can load as numpy arrays or PIL images can be passed into st.image and displayed. Hope that helps! Happy app creating! 🎈

@treuile, thank you . "Local images "i meant the imgaes which are already downloaded and want to use those (which are available in the system). "Ngrok url" i meant that tunnel which we use to run the web app online. Sorry for the inconvenience anyway. Thank you very much 🙏🏻.

Ok. Best of luck, @Terre10!

thanks it's an amazing function

how can i clear the list of file please ?

Hi @suzuki-arc. I would suggest asking this question on the Streamlit forums for faster responses. I not 100% sure I understand the question myself 🤭 but generally, the way you'd change the file list is by passing a different set of images into the paginator. I hope that helps! 😬