Giant images

[dias]

Hey there Glide community!

I was developing an app, as usual, but I wanted to make a container with just the person’s image and name. That I got right, but I need help with just one big issue.

Quite literally. Is there a way to make this image smaller? I’m assuming this happens because Glide means “Original image resolution” when it’s talking about Small images. Most of our users profile pictures have high resolutions — I’m thinking of reducing these images resolution to fix this issue, but I don’t know how to do so. Help would be very much appreciated!

Thanks.

[dias]

Replying to boost this — can someone help?

[ThinhDinh]

I would try Title > Simple > Compact.

[dias]

The thing is, that won’t work. This screen is for an embed on live streams with software like OBS, and if we use anything smaller than Headline Large, it gets so tiny the viewer can’t see it. That’s why I was looking for a solution via resolution or CSS — anything to just reduce the image’s size without doing the same for the text. Thanks for your reply, though!

[Himaladin]

Can you give an example of the image URL?

[Jeff_Hager]

I would create an HTML IMG tag with the URL for the image and adjust the size using HTML. Then display it in a rich text component.

[ThinhDinh]

Here’s the execution. You can change the font size as needed.

<div style="display: flex; justify-content: start; align-items: center; text-align: center;">
    <div style="width: 100px; height: auto;border-radius: 50%; overflow: hidden; margin-right: 20px;">
        <img src="{I}" alt="Circular Image" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="font-size: 36px; font-weight: bold;">{N}</div>
</div>

[dias]

That worked! Thanks a lot.

I just have one minor issue — some images end up coming stretched.

If you could help me out with unstretching them, that’d be great, but no worries if you can’t.

[ThinhDinh]

Please try this:

<div style="display: flex; justify-content: start; align-items: center; text-align: center;">
    <div style="max-width: 300px; height: auto;border-radius: 50%; overflow: hidden; margin-right: 20px;">
        <img src="{I}" alt="Circular Image" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="font-size: 36px; font-weight: bold;">{N}</div>
</div>

I set a max-width for the image, rather than forcing them to be 100px.

[dias]

Thanks a lot!