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.
Just past the one-month anniversary of posting. Hope y’all don’t mind a bump in case someone knows?
Interesting that there’s no way to do this
It’s worth building a plugin around
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
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.
The image gets cached on first load, so it shouldn’t be downloading multiple times
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?
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.
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.
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!
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.
Hi can I chime in?
I have a few questions about the implementation
Thank you!
‘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.
So basically here are the steps
My follow up questions would be:
Thanks for replying so quickly btw
It’s an either/or between classify and ‘run javascript’
So the steps would be:
That should do it
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
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>
