Responsive Fixer Image Script to fix Bubble (lol)

I find it a bit silly that I have to do this, but for some very odd reason I can’t explain, the default Image object doesn’t actually work as intended for static images

When trying to drop a static image into a page, the default width to height ratio is assumed to be 1x1. If you try to make the ratio of width to height less than that, you can’t. You also can’t just force Bubble to keep the image width and height unset (from what I can tell).

You would think that it should take all of 10 seconds to add an image to a page and make it render to unset width and height by default.

Nope.

I tried playing with various settings and then I looked into the code and found a very odd thing. A div with class “aspect-ratio” that has a “padding-top” value that corresponds to the rendered image height in the browser (2nd line below)!!

<div class="bubble-element Image baTaJaJaM">
<div class="aspect-ratio" style="padding-top: 133.344px;"></div>
<img src="xxxxw=512&amp;h=155&amp;auto=compress&amp;dpr=1.5&amp;fit=max" style="height: unset;">
</div>

WTF. LOL. I have worked in Tech for 20 years. I just know this is a back-end programmer with little browser knowledge. I had a good chuckle.

Anyways, so I wrote some JQUERY that basically fixes your images so they render responsively inside of whatever container you place them in (use a group and control your image default width that way)

To use the script below:

  1. Add an HTML file to your page
  2. Drop everything below into it

What it does:

  1. Looks for any div with class bubble-element Image

  2. Look for the div inside it with class aspect-ratio

  3. Gets the rendered image height and sets the aspect-ratio padding-top to this value in pixels.

     <script>
     $(document).ready(function() {
       // Find div with class "bubble-element Image"
       var $bubbleElement = $("div.bubble-element.Image");
    
       // Find div inside the above div with class "aspect-ratio"
       var $aspectRatio = $bubbleElement.find("div.aspect-ratio");
    
       // Set the height of all <img> tags inside the found div to unset
       $bubbleElement.find("img").height("unset");
    
       // Recalculate and set the padding-top value based on the image height
       function setPaddingTop() {
         // Get the height of the image
         var imageHeight = $bubbleElement.find("img").height();
    
         // Set the padding-top of the aspect ratio div to the image height in pixels
         $aspectRatio.css("padding-top", imageHeight + "px");
       }
    
       // Initial calculation of padding-top value
       setPaddingTop();
    
       // Recalculate padding-top value when the browser window is resized
       $(window).on("resize", function() {
         setPaddingTop();
       });
     });
     <script>

I have experienced issues with images’ aspect ratio in responsive engine too. They don’t work intuitively.

But I couldn’t understand your post. Would it be possible for you to dumb it down even more so that we know whether this is for us or not, whether we should use it or not, when to use it, and also whether to file a bug with Bubble or not (though that’s a joke really. They always say its intended behaviour).

OK… haha… sure… I will add it to my list of things to do (never ending lol).

Maybe in a week or so, I will do some more testing in a blank project so people can see and copy.

The easiest way to see it in action is simply

  1. Add a static image to a page and preview the page
  2. Add an HTML object on the same page
  3. Include my entire script
  4. Refresh the page

Oh, I also filed a bug as well: Can you please fix static image responsive sizing

Though, technically its not a bug, but more of a feature upgrade.

The entire Bubble properties panel and Flexbox stuff hasn’t been perfectly handled yet. I’m sure the team are working on it though.

1 Like

Yeah it’s really annoying how Bubble handles images.

What works for me is to put the image into a group and set the max width of the image to 100%. Or something like that, i have to check my apps.

1 Like

Yes, I saw that method mentioned. Its silly we have to do this to make something work that should really be a non-issue.

Hi @mayur,

I agree the UX for handling images with static URLs is far from ideal, but JS is not needed. Either of the following works for me:

  • Option 1 - Use the image dimensions for aspect ratio

    Just use the original image’s height and width for the aspect ratio (assuming you don’t use the crop feature).

  • Option 2 - Make the image expression dynamic

    Simply putting the image URL inside an Arbitrary text operator makes the expression dynamic instead of static, thereby allowing it to be configured accordingly. You can even forgo the aspect ratio setting and instead enable Fit height to content and the height will automatically be adjusted based on the width.

2 Likes

Oh wow… OK, so thats how you do it… Good to know! Thanks @sudsy

1 Like