How to keep an image's natural aspect ratio when setting height

[brenton.strine]

i want to set an image’s height but let the width be set by the natural aspect ratio.

Instead, the width is getting set to 100% and making all my images look like weird rectangles.

I’ve been able to do this when I specify the width but not the height.

I’d like them to have fixed height rather than fixed width. But allow the width to automatically be determined by the height.

[brenton.strine]

Just past the one-month anniversary of posting. Hope y’all don’t mind a bump in case someone knows?

[atomicfusion]

Interesting that there’s no way to do this
It’s worth building a plugin around

[atomicfusion]

Get Image Size Plugin for Bubble, by Blur Apps

Just built this out. Hope it helps

---

Cheers,
Ranjit from Atomic Fusion

Explore and reuse the community’s Bubble assets & Accelerate your Bubble development with Atomic Fusion

[brenton.strine]

Does that need to download each element to get the dimensions, which I guess would mean you download each image twice, once to get size, then once on the page when you display it?

Definitely solves my problem though. I’ll have to see what the bandwidth effects are.

[atomicfusion]

The image gets cached on first load, so it shouldn’t be downloading multiple times

[brenton.strine]

You know, I finally had a moment to implement this and I’m realizing that images don’t have any place that allows you to dynamically set width and height. How were you intending to use the values that app that you built exposes?

[atomicfusion]

Setting Custom CSS via JS at the moment. Running it via the ‘run javascript’ action from the Toolbox plugin on page load:

$(function() {
    var div = $('#myElement');
   
    div.css('height', <Plugin_height_value>);
    div.css('width', <Plugin_width_value>);
});

Can’t wait for dynamic height/width becomes a thing on Bubble.

[brenton.strine]

And of course the next problem with Bubble is the lack of being able to assign a class to items.

I kinda feel bad for the developers, there’s so much opportunity to make Bubble better with fairly small changes, but… they can only do it one at a time.

[atomicfusion]

Well there is a plugin that lets you do that, but it’s not the most reliable in my experience. I’d prefer just injecting CSS.

This JS that I mentioned above doesn’t need any classes to be assigned since ‘width’ and ‘height’ are default attributes that exist on the element. So simply running a code snippet like that along with the plugin on page load should do the trick for you!

[brenton.strine]

Right, I would just need to add the ID to each item or use Classify.

Really what I’m realizing is that when you find yourself going against the grain of what’s easy in Bubble… stop.

[dcardinesiii]

Hi can I chime in?

I have a few questions about the implementation

1. what’s the workflow you used to activate the “run javascript” action, “on page load?”
2. in the snippet there’s a line that references a div “#myElement” buy you said there’s no need for CSS so I’m a bit confused?
3. can you show the settings of your javascript element it’s the first time i’m using it

Thank you!

[atomicfusion]

‘run javascript’ comes from the Toolbox plugin

Without CSS would have been ideal, but there isn’t a way around it unfortunately.
The question is how exactly to implement it - manually via the ‘run javascript’ workflow or by using a CSS injector plugin like Classify.

[dcardinesiii]

So basically here are the steps

1. Install ‘imageheight’, ‘classify’, and ‘java…’ plugin
2. Add CSS ID to the image element
3. Add the imageheight element
4. On page load activate ‘run java…’
5. Enter the code snippet to the javascript element

My follow up questions would be:

1. Will I mess with the names of these variables <Plugin_height_value> <Plugin_width_value> or no need anymore

Thanks for replying so quickly btw

[atomicfusion]

It’s an either/or between classify and ‘run javascript’

So the steps would be:

1. Install the Toolbox plugin
2. Add a ‘run javascript’ WF on page load with this script:
   How to keep an image's natural aspect ratio when setting height - #8 by atomicfusion
3. Set the ID of the target element as “myElement”

That should do it

[dcardinesiii]

I can’t seem to get it to work

Here’s the imageheight element:

The Image element ID:

And the workflow snippet:

Here’s what’s resulting, it’s getting cut and what it should be is a full length of a page screenshot

[atomicfusion]

OK

So <Plugin_height_value> would come from the plugin via dynamic data - so it would look something like ImageSize A's height_value

similarly for <Plugin_width_value>

[dcardinesiii]

Yeah I tried it too, unfortunately it doesn’t work also…

here’s the result