Hi All,
My users submit images of different sizes. And I would like to keep them as is, without cropping them. And display them as a mosaic of images in the profile page using a repeating group.
Is there a way to do this? Dynamically re arrange pictures based on their size to fit a group.
Thanks,
Raul
@deburhuduga, I’m wondering the same thing. The only “workaround” I’ve found with Bubble’s current responsive settings is to add an HTML element and add HTML code that references an uploaded image’s URL as the source. Really hoping there’s a better way that doesn’t involve purchasing some plugin
Does the html workaround work OK? Do you mind sharing how it’s done?
I’ve just started to use this, and it seems to work, though I’m sure I’ll need to fiddle with some of the settings. Basically, add an HTML element to the cell and then set it to “Stretch to fit content.” You can then populate the HTML element with code like what you can find on a site like W3 Schools: How To Create Responsive Images
You can dynamize this using Bubble dynamic data like so:
Hope this helps. I’m still just starting to implement this but it is a good short-term solution until Bubble releases its new Responsive Design engine.
Sounds cool! Can you show a screenshot of the effect?
Here’s an example of a two-cell RG with an image in each cell within an HTML element (without any width or height properties set); the first image’s dimensions are 157 x 104 and the second 843 x 563:
These aren’t responsive, so a person would need to add certain HTML properties (width, height) to the HTML element to make them responsive, but this is the starting behavior.
Hey, @deburhuduga. Not sure if you’ve seen their, but thought of your question when I saw it. Pinterest Style Photo Grid
Thanks! It’s a step closer to mosaic 
If anyone’s up for building or funding it for me to build out, this is possible using a JavaScript library called masonry
Did we get anywhere with this?
