Help returning an image's width in HTML?

Hi, I’m having a bit of trouble returning the width of an image by using HTML. I have an image that is saved to the database, and I need the information about the image’s width and height in order to perform a calculation that allows me to have a “horizontal-carousel” of images. I managed to correctly perform the calculation I needed by using a plugin called “get image dimensions” which allowed my to make my carousel (attachment 1). The problem is that the plugin is very clunky and I am planning on returning many images from different profiles which completely breaks the plugin so it is no longer valid in my approach. I’ve tried every single “.width”, “.width()”, “.naturalWidth”, “.getWidth()”, etc. etc. commands to get the html to return the width of the image, but nothing seems to be working. Instead, it returns the URL link that I can literally see the dimensions contained within. I’ve attached images of (1): how the dimensions are supposed to be returned in the html evaluator (from the plugin), and (2): how they look when I try to return the dimensions and save them as a variable. (also, T1 in the evaluator section of the debugger mode is the image file itself from my database)

Any help would be greatly appreciated!

If you wrapped your pictures in a group, then try to ping that group (assuming you assign a class or ID to the group), you should be able to grab the width from that element with vanilla Bubble or JS.

So the images are contained within a group. the parent group is a repeating group-> group top row (top row container) → group picture T1 (the image itself is exactly this group). T1 stands for top row, image 1. when I reference that specific group (Group picture T1) in the HTML, bubble doesn’t return that group in it’s selection for some reason (attachment 1). I also attempted to reference the parent group and work my way in the nesting of groups, again to no returns (attachment 2). I think I understand what you’re saying with how I should be able to return an image’s width in vanilla bubble, and this does somewhat work with the image element. A problem with this method is that it returns the dimension of the “element” of the image, rather than the origional image dimensions themselves. (so for example, if my image element is 50 pixels wide, it returns 50 pixels, not 1662338821974 pixels which is the actual dimensions of the image, attachment 3). I also tried returning the dimensions of that “group image T1” that the image is actually of, but bubble doesn’t have the option to return “T1’s width” like how I can do it with the image element from the third attachment. (attachment 4)




I really appreciate your help! this seems like it should be really straightforward and easy, but I’m stumped.

So… your ultimate goal is just to get the actual size from the image?

yep! My code is attachment 1. Attachment 2 is the html evaluator in debug mode returning the URL + gibberish without actually doing the calculation. Attachment 3 is my calculation that I did on paper, which should set the group T1’s width to a value of 29.3 pixels. I’m wonding if I’m using the wrong syntax for this which is why it is not doing the calculation in the evaluator.




Attachment 4 is a picture of essentially the exact same calculation by using the plugin. I can’t use the plugin for returning multiple profiles from the database because it isn’t able to do so without a separate workflow for each profile (if for example, I had thousands of profiles, I would need a plugin-workflow for each profile, making the plugin useless in this instance. )

edit: I forgot the tag at the end of attachment 2, but it still returns the exact same thing when I add it, so nothing actually changed

And I really do appreciate your help! Thanks sm!

This topic was automatically closed after 70 days. New replies are no longer allowed.