Image Aspect Ratio Incorrect on Initial Load

Ask for Help
1

I’ve read through Glide’s documentation, posts on the forum and even looked back at a similar post of mine from a couple years ago, but still don’t understand why this happens. Sorry if I’m missing a post somewhere that is the same as this.

When an image first loads, it appears to open briefly in a square aspect ratio.

Can anyone explain why this happens and how to prevent it? Thanks!

Glide Details:

  • Current Glide Version (not Classic)
  • Image stored in a Glide table and referenced via a relation/look up
  • Image component set to “Full Size”

Image Details:

  • 5:1 aspect ratio
  • 2400x480 px
  • PNG
  • 1 MB
  • Created and exported in Canva

Phone Details:

  • iPhone 13 Mini, iOS 17.1.1
  • Same behavior on a Samsung Galaxy

IMG_7297

Welcome Message
Welcome Message2400×480 59 KB

2

It may help if you preload the image in a prior screen. Put the image in a rich text component and set the container height to ‘0’ to hide. I can’t be for certain it will work but I’ve had some success with a similar use case.

3 Likes
3

Thanks. I’ll give it a try.

Can I load all of my header images like this in a single rich text component? Sorry if that’s a dumb question, I’m not at my computer currently and I’m trying to figure out in my head how I would even get the image into a Rich Text component. Is it done with an HTML IMG tag? And are you talking about setting the container height in HTML?

Does my image file size, image dimensions and file format seem reasonable/best practice, or should I be making changes to optimize the load speed?

Do you think the current behavior is a bug?

It seems like an odd workaround for a problem that doesn’t seem like it should exist. I understand that images have to be loaded initially to be cached on your device, but I don’t understand why they would load with the incorrect aspect ratio in the first place.

1 Like
4

Yes.

Something like this…

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>
<body>
    <div style="height: 0; overflow: hidden;">
        <img src="YOUR_IMAGE_HERE" alt="Image 1" style="width: 100%; height: auto;">
    </div>
</body>
</html>

Appears to be fine… maybe could be smaller file size… not really my wheel house

Seems like there’s room for improvement

2 Likes
5

It appears that Glide is doing it’s own image processing through Cloudinary, so I don’t think pre-loading it in a Rich Text component is going to help? (It doesn’t appear to in my testing.)

Here is the URL of the image that gets loaded: (you can see it’s going through Cloudinary)

The only URL I can use in the Rich Text component is where Glide is storing it in Google. The Cloudinary URL is dynamic based on device type/screen size.

I’ve found two things that seem to help:

  1. Using compression when downloading from Canva on the original image to make the file size smaller so that it loads faster. I’m not certain how much of a difference this makes since Glide is still doing their own processing on the image no matter the original size.
  2. Manually specifying in the Glide Layout Editor that the Aspect Ratio is 3:1 instead of “Auto” (even though it’s actually 5:1, this essentially adds padding to the top and bottom of the image, but the initial loading “flash” is a set 3:1 size rather than a square aspect ratio that flashes as a square and then resizes to 5:1).
6

Does it help if you use a rich text component for your headers instead of the image component?

Try this in combination with the previous trick and I think you’ll like what you see :wink:

<!DOCTYPE html>
<html lang="en">
<body>
    <div style="width: 100%; padding-bottom: 20%; position: relative;">
        <img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/aDL19PhHCqg7Rwq7bziB/pub/ta49RVKKJNvkp2wVCCC4.webp" alt="5:1 Image" style="position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">
    </div>
</body>
</html>
3 Likes
7

Why depend on third-party integrations??? Create your own message in HTML :wink:

<center>
<div style="background-image: url('https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/5eyBHcV4gVrzj8StpMkM/pub/EYmnTaYRFZ4bcgKP7vjl.png'); 
color:white;
width:100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
;padding:20px;
text-shadow: 1px 1px 4px black">
<b>
Welcome Message
</b>
</div>
</center>
2 Likes
8

Does it help if you use a rich text component for your headers instead of the image component? Try this in combination with the previous trick and I think you’ll like what you see :wink:

I’ll give this a try, but I don’t like depending too much on HTML since it’s not an officially supported solution in the Rich Text Component and could theoretically break at any point in time.

Why depend on third-party integrations??? Create your own message in HTML :wink:

Ironically I’m trying to use the native Image Component, but Glide is forcing the third-party integration.

9

HTML will never break… don’t warry about it… copy my code and paste into the rich text component

10

Nice one, @Uzo

1 Like
11

Thank you… Long time no see :wink:
BTW, I have a killer Stripe integration now! LOL

1 Like
12

I didn’t notice at first that you were also creating the text to go over the background. That could work, but I have 4 different background images that are somewhat randomized as to when they are used as the background.

My graphic design team wanted it to be varied. I’m trying to think if there’s a way I could use a template column to accomplish this. Maybe assign each row a number value 1-4 with a corresponding background image. Thoughts?

2400×480 58.6 KB

800×160 49.1 KB

2400×480 77.2 KB

2400×480 55.1 KB

13

yes, use template column and replace image URL and Text

1 Like
14

Thanks, this could be a great solution. It’ll take me some time to update it everywhere though.

I’ve made a few modifications to the HTML to make it better fit our branding and the look of the native Glide image component. Everything still look okay?

<center>
<div style="background-image: 
url('https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/MvFNwjfYSW1Rk1BYYzsm/pub/TvM4IwpOjgGJ4BU7sma1.png'); 
border-radius: 10px;
color:white;
width:100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
;padding:25px;
black">
<font size="+2">
<b style="font-family: Source Sans Pro";>
Welcome Message
</b>
</font>
</div>
</center>
1 Like
15

@Uzo Unfortunately I realized a flaw in what I had. We are using a non-default font “Source Sans Pro”. It originally displayed correctly when viewing the builder from my computer because I have the font installed on there, but once I viewed it on my phone, it changed the font to something else. I don’t suppose you know of any way to fix that and still use our font?

Possibly by integrating this in some way? I’m not very good with HTML/CSS, so I’m not sure where to place everything in the code that I already have.

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Source Sans Pro' rel='stylesheet'>
<style>
body {
    font-family: 'Source Sans Pro';font-size: 22px;
}
</style>
</head>
<body>

<h2>Source Sans Pro</h2>

</body>
</html>
16

You can only use fonts supported by HTML. You can make images for each instance using Photoshop and upload them to Glide, then substitute them with a template column.

1 Like