How to centre and resize gifs in streamlit

Hi everyone, I would like to know how i could centre and resize gifs in streamlit. Thanks

I’d suggest using the width param in st.image. st.columns can be used to place the image in the center of the page. (For finer-grained control of the image size, etc., use the image module from the PIL library.)

See: st.columns - Streamlit Docs, which includes an example using st.image.

_left, mid, _right = st.columns(3)
with mid:
   st.image("./images/logo.gif")

HTH,
Arvindra

Thanks for your response, i tried st.image but the animation doesn’t work with this when i use width to increase the gif size.

Can you attached the gif and I’ll take a look? You may need to serve a gif file, say from GitHub, e.g. try this line in your code?

st.image('https://raw.githubusercontent.com/asehmi/fastapi-wrapper-apiness/main/images/fastapi_wrapper_st_demo.gif')

ezgif.com-gif-maker
st.image(“data/picker.gif”, width =1200)

@Oluwole_Fagbohun

Okay, I see what you mean that as soon as you add the width attribute the animation stops :frowning:

I tried a few variations:

  • PIL.Image() - no good as the animation is lost
  • Converting the gif to mp4 video and then using st.video - no good as the video can’t be set to auto-start and loop
  • Rendering HTML and loading it using components.html - couldn’t get this to work :cry:

The simplest would be to regenerate your gif to the desired size, if you can. Or you can use the excellent Lottie system together with the streamlit-lottie component, streamlit-lottie · PyPI. See how to convert a gif to a lottie json file here: lottie · PyPI.

If anyone else is reading this and has a solution, please let me know?

Thanks,
Arvindra

Thanks for trying, will look into your suggestions. I appreciate.