Forum Academy Marketplace Showcase Pricing Features

Display different sized images in a repeating group

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:
image

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.

1 Like

Thanks!

I really need a mosaic / tile pattern. like this:

Hey, @deburhuduga. Not sure if you’ve seen their, but thought of your question when I saw it. Pinterest Style Photo Grid