Image and text next to each other

[ddutt]

Hi,

I’m struggling to do some fairly rookie HTML stuff and searching for answers on this channel or trying to implement the answers I found on StackOverflow haven’t helped.

I have two problems. First, I have a local image that I want to display (st.image works, but doesn’t work because I can’t find where the media directory is hosted!
The more important problem is how do I render a text and image next to each other, like a logo and the name?

This is for an open source tool.
Thanks for providing an awesome tool to get started quickly.

Best wishes,
Dinesh

[Marisa_Smith]

Hey @ddutt,

Can you post the code you’re working with?

When you say:

@ddutt

I have a local image that I want to display (st.image works, but doesn’t work because I can’t find where the media directory is hosted!

what do you mean you cant find where the media directory is hosted? are you trying to link an image that is not on your local machine?

To render text and an image next to each other you can use the st.beta_columns function. Checkout our documentation on columns

Happy Streamlit-ing!
Marisa

[ddutt]

Hi Marisa,

Thanks for the response. I’m using the beta_columns, but it puts the text and the image far away from each other unless I manipulate the column widths a bit, but then it gets messed up if the display size changes.

Here is what I have now:

        title_container = st.beta_container()
        col1, col2 = st.beta_columns([1, 20])
        image = Image.open('/home/ddutt/Pictures/Suzieq-logo-2.jpg')
        with title_container:
            with col1:
                st.image(image, width=64)
            with col2:
                st.markdown('<h1 style="color: purple;">Suzieq</h1>',
                            unsafe_allow_html=True)

And what I’d like is something like:

st.markdown('<h1 style="float: left;">Suzieq</h1><img style="float: right;" src="logo.jpg" />', unsafe_allow_html=True)

Dinesh

[Marisa_Smith]

hey,

Can you put a screen shot of your code in a streamlit app? so I can see whats happening and what you’re trying to do?

Are you trying to put a logo next to your name?

Thanks
Marisa

[ddutt]

Yes, logo next to the name,

Dinesh

[ddutt]

And the reason for wanting something else is because this separation between the logo and the name which looks perfect right now gets squashed together when I play with the screen size (tablet, smaller screen etc.)

Dinesh

[Marisa_Smith]

Oh I think I see here,

So you want to keep some space between the logo and your name when you switch to a smaller screen device. Because when you switch (to a small screen) they are becoming squished together?

I trick I have used in the past to create a bit of space between columns is by actually making a middle column that I don’t put anything in. You have to play around with the sizing a bit but it does create space:

import streamlit as st

st.write("a logo and text next to eachother")
col1, mid, col2 = st.beta_columns([1,1,20])
with col1:
    st.image('row_2_col_1.jpg', width=60)
with col2:
    st.write('A Name')

gives:

because there is a column in the middle, when you switch to a smaller screen, it should preserve most of the spacing. The thing with columns in different screen sizes, is that they’re smart, and they automatically resize and redistribute based on the screen size. Checkout the blog post on layout options. So if the screen size gets too small, the other columns will get bumped below, as you can see in the gif on the blog.

Hope this proves helpful!
Happy Streamlit-ing!
Marisa

[ddutt]

Ahh interesting. If you see my code, I had tried something like what you had suggested, but with 2 container columns. When I try with three, the spacing between the image and the name becomes too much. See this:

.

I appreciate your taking the time to help me out,

Dinesh

[Marisa_Smith]

Hey @ddutt,

what was the line of code you were using to initiate the columns? If you notice in mine I use the st.beta_columns functionality to specify the size of the columns by passing a list that changes the size of each column created:

col1, mid, col2 = st.beta_columns([1,1,20])

in my example:
col1 and mid columns are the same size
col3 holds my content and is 20 times the size of the first 2 columns

if you play around with the ratios of the numbers for the columns you will (very likely) be able to find a ratio that works for you!

Hope this helps!
Happy Streamlit-ing!
Marisa

[ddutt]

Hello Marisa,

I mentioned it in my original post, its [1, 20]

@ddutt

col1, col2 = st.beta_columns([1, 20])

Best wishes,

Dinesh

[Marisa_Smith]

Hey @ddutt,

Sorry I meant when you tried the 3 column way, not with just 2 columns, what were your ratios then?

Cheers,
Marisa

[ddutt]

My apologies for misunderstanding your q.

I tried the numbers you gave (the image I attached was with yours), and I tried with [1,1,10] and [1,1,5], and I believe I tried [2, 2, 10].

Dinesh

[Marisa_Smith]

no problem, communicating through text isn’t always ideal and I wasn’t as clear as I had hoped!

hmm ok is there white space around your picture? in my example i made sure to choose a picture that had no surrounding whitespace, maybe that is contributing to the big spacing?

Also, are you still using the title_container wrapper? Im double checking this but i am 99% sure that there is no current functionality in Streamlit to put containers in containers, so it might be contributing to your spacing issues.

[ddutt]

Aha. Interesting point. I believe there’s whitespace around the picture. Let me try to see if I can fix that.

Thanks much,

Dinesh

[Marisa_Smith]

Hey, Great! i do hope that helps!

I was only semi-right on the containers in containers comment.

Currently, you can’t put columns inside another column, or an expander in an expander, but you should be fine to use the beta_container and then use columns or an expander inside!

Apologies for that!
Marisa

[ddutt]

Thanks again Marisa. I learnt a trick of using a column as a definitive divider between places! The image has as much whitespace because of the shape of the owl. I’ll live with it for now.

Dinesh

[Marisa_Smith]

Thanks for letting me know!

[ash2shukla]

Hey @ddutt,

Why not use our beloved markdown ? , I whipped up something for you it might do the job better for you.

import streamlit as st
import base64

LOGO_IMAGE = "logo.png"

st.markdown(
    """
    <style>
    .container {
        display: flex;
    }
    .logo-text {
        font-weight:700 !important;
        font-size:50px !important;
        color: #f9a01b !important;
        padding-top: 75px !important;
    }
    .logo-img {
        float:right;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.markdown(
    f"""
    <div class="container">
        <img class="logo-img" src="data:image/png;base64,{base64.b64encode(open(LOGO_IMAGE, "rb").read()).decode()}">
        <p class="logo-text">Logo Much ?</p>
    </div>
    """,
    unsafe_allow_html=True
)

It will look like this,

Sorry for the abhorrent code though
Hope it helps !

[ddutt]

Woohoo! Thanks a ton @ash2shukla , this did the trick! I can’t write HTML/CSS/JS to save my life, so your so-called ugly code is better than what I can produce

Best wishes,

Dinesh

[Koushan]

Great solution, any idea how to change the location (let’s say top left corner) or size of the logo?