streamlit-imagegrid 0.0.2

Streamlit imagegrid

Streamlit ImageGrid plugin

Setup

python setup.py install

Sample

zoom allows for increasing and decreasing the height of image grid images. urls takes in html or disk urls with absolute path.

import streamlit as st
from streamlit_imagegrid import streamlit_imagegrid
import requests
from PIL import Image
from io import BytesIO

st.title('Image grid test')
zoom_val = st.sidebar.slider('Zoom',40,240)

urls = ["https://as1.ftcdn.net/jpg/01/41/02/26/500_F_141022623_Wi0PLc8Xi1K4FcPKF4UJAjNu6vuYjha5.jpg",
        "https://t4.ftcdn.net/jpg/02/65/19/21/240_F_265192146_GkxdiHss4XhAPPHkW2C6nBkrfrc4DxrJ.jpg",
        "https://t4.ftcdn.net/jpg/01/18/41/79/240_F_118417934_BYUeBM4c2TTFcbl9xkKT7KnJjvbKAIaB.jpg",
        "https://t3.ftcdn.net/jpg/00/71/63/34/240_F_71633411_20afo12ENX4SvYssbZZAQGjE6LlUWMOO.jpg",
        "https://t4.ftcdn.net/jpg/01/18/41/79/240_F_118417934_BYUeBM4c2TTFcbl9xkKT7KnJjvbKAIaB.jpg",
        "https://t4.ftcdn.net/jpg/01/18/41/79/240_F_118417934_BYUeBM4c2TTFcbl9xkKT7KnJjvbKAIaB.jpg"]

return_value = streamlit_imagegrid(urls=urls,zoom=zoom_val)
st.sidebar.write(return_value)
if return_value is not None:
    response = requests.get(return_value)
    st.sidebar.markdown('<img src={} width=240px></img>'.format(return_value),unsafe_allow_html=True)

Supported URL's Format

Case 1

Single url list. This works but no auto align with nice image flow.

urls = ["https://as1.ftcdn.net/jpg/01/41/02/26/500_F_141022623_Wi0PLc8Xi1K4FcPKF4UJAjNu6vuYjha5.jpg", "https://t4.ftcdn.net/jpg/02/65/19/21/240_F_265192146_GkxdiHss4XhAPPHkW2C6nBkrfrc4DxrJ.jpg", "https://t4.ftcdn.net/jpg/01/18/41/79/240_F_118417934_BYUeBM4c2TTFcbl9xkKT7KnJjvbKAIaB.jpg", "https://t3.ftcdn.net/jpg/00/71/63/34/240_F_71633411_20afo12ENX4SvYssbZZAQGjE6LlUWMOO.jpg", "https://t4.ftcdn.net/jpg/01/18/41/79/240_F_118417934_BYUeBM4c2TTFcbl9xkKT7KnJjvbKAIaB.jpg", "https://t4.ftcdn.net/jpg/01/18/41/79/240_F_118417934_BYUeBM4c2TTFcbl9xkKT7KnJjvbKAIaB.jpg"]

Case 2

Best case with auto-align. In this case if width and height are NOT provided auto align and resize and nice image flow will not work. (Yet)

urls = [ { "width": 1000, "height": 666, "src": "https://as2.ftcdn.net/jpg/02/25/53/52/1000_F_225535263_n14yO9cXk18X90qQYxBf5Vcf00uOtAhW.jpg" }, { "width": 1000, "height": 422, "src": "https://as2.ftcdn.net/jpg/02/81/07/83/1000_F_281078312_PcISs3yKL9r70nCqvDkgOR17UBGIw97C.jpg" }, { "width": 1000, "height": 666, "src": "https://as2.ftcdn.net/jpg/02/96/35/64/1000_F_296356423_f6IEidPVRWzaqj2MJQ2VLJJTYGRAtY4P.jpg" } ]