Do you want to create a masonry style gallery? Sometimes you need to display full-view thumbnails without cropping the height or width.
Now, you can change the view of your repeating group with images to masonry style gallery. Plugin works by placing elements in optimal position based on available vertical space.
Nice! Much better than the alternatives I’ve seen! That’s exactly the library I was planning to implement in my app. I think you just saved me some time!
Are there any special considerations - e.g. does the RG have to be configured in a certain way?
How is pagination handled - in any way that works with a RG?
EDIT: Also, I noticed that in the bottom (dark background) gallery, the image title appears on hover; yet I don’t see how to configure that in the plugin. How does that work? I’m guessing you just tweak the CSS as desired?
I’m using the plugin and love the functionality…well done!
One thing I’m hung up on is the height is not collapsing when taller pictures are used. I’ve tried to match up with your demo page exactly, but just done see what I’m missing. Is there any common mistake that I could be making?
Hello!
Perhaps you missed some nuance when connecting.
Try it like this:
Place a repeating group on the page and connect it (Fill in Type of content and Data source)
Set Layout style = Ext. vertical scroling.
Set, for example, Row = 1, Columns = 4.
It is desirable to set Separate = none.
Register “ID Attribute”
If this parameter is absent, then enable the display of element IDs.
Go to Settings → General
and check the box in “Expose the option to add an ID attribute to HTML elements”
Place the “image” element in the cell of the repeating group, connect it and set “Run-mode rendering” = “Adjust element height”.
Place the plugin element “RG to Pinterest Grid” on the page and in the field “Repeating Group ID” write the value that is written in the “ID Attribute” from the item
It seems that everything. And if something does not work out - once again see how all this is connected in the demo page editor.
Or contact us again and we will definitely help.
Thanks.
The info in your step #5 was exactly what I needed. I didn’t have that option visible so I didn’t even know it was missing. Everything looks great now and the plug in works great! THANK YOU!
just bought the design and wanted to use it, but it seems to be that if there is a RG inside the RG the design crashes. Is there any solution for this?
At this moment, we are adapting our plugins to the new responsive engine.
Tomorrow we will start working on the “Repeating Group to Pinterest Grid” plugin.
It is necessary to adapt the plugin to work with the new responsive engine and test its operation. I think it will take a couple of days.
We will publish a new version and immediately report it here.
Finished work on adapting the plugin to work with the new adaptive engine.
We tested the plugin and submitted it to the Bubble team for review.
Plugin version 2.0.0
Once the Bubble team reviews the plugin, the update will be made available to users.
@MindForApps
Hi there, nice PlugIn although I am facing a spacing issue to be seen in my screenshot. You can reproduce it in your own demo as well by selecting the “Animals” Gallery.
Thanks for your support.
Oh yes I see.
Thanks for bringing this to my attention.
But this is not a plugin issue. These are the subtleties of setting up the Repeating Group.
It’s just that I (I think that you have) in the settings of the Repeating Group had a restriction on the minimum height of the cell / row (Min height of row). And the images in the grid retain their proportions. Thus, the height of the image and, in general, the entire contents of the cell is less than the value that we specified in the “Min height of row” setting. This is why we see gaps in the grid.
If, after changing the “Min height of row” in the repeating group, the problem of spaces remains, then also check the “Min height” parameter for other elements nested in the repeating group cell.
Hi,
thank you for the quick and detailed feedback. After double checking my (min) heights everywhere I found thanks to your answer a fixed height of 300 in the image setting itself.
Now it is looking as expected.
Thanks again
Carsten
