🚀 [NEW PLUGIN] Repeating Group to Pinterest Grid

[MindForApps]

Hello Bubblers!
We’ve just published a new plugin:

RG to Pinterest Grid

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.

Demo:
For details and demos please visit the plugin page at:
https://plugin-preview.bubbleapps.io/version-test/pinterest/1567070045590x726784394974660600

Plugin page:

RG to Pinterest Grid Plugin for Bubble

If you have questions, reach out to us at [email protected]
We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

[sudsy]

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?

[StevenM]

Nice job, nice a snappy too!

[MindForApps]

[MindForApps]

No special settings are needed. You can configure the RG as you wish.

The appearance of the header is configured through the group’s conditions.

[nathan.a.meyer]

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?

Thanks in advance for anyone that can help out!

[vasanbo]

Hello!
Perhaps you missed some nuance when connecting.
Try it like this:

1. Place a repeating group on the page and connect it (Fill in Type of content and Data source)

2. Set Layout style = Ext. vertical scroling.

3. Set, for example, Row = 1, Columns = 4.

4. It is desirable to set Separate = none.
   

5. 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”
   
   

   

6. Place the “image” element in the cell of the repeating group, connect it and set “Run-mode rendering” = “Adjust element height”.
   

7. 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
   

8. 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.

[nathan.a.meyer]

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!

[daviddr17]

hey @vasanbo ,

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?

Thanks in advance!

[daviddr17]

hello, there is another issue now. when resizing the page it cuts off everything beneath the grid. My page is not working anymore then.

Any help on this issue please, cause right now it is not usable anymore?

[MindForApps]

version 1.7.0.

Added support for a new responsive engine.

Bubble - Visual Programming

[emaclassificados]

is it working with the new responsive engine?

[MindForApps]

Hello!

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.

[MindForApps]

@MindForApps

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.

[cajudick]

@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.

[MindForApps]

@cajudick

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.

Hello!

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.

.
.
.

Just need to allow a smaller value for the “Min height of row” parameter

.
.
.

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.

Thank you.
Good luck.

[cajudick]

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

[emaclassificados]

Thank you for quick answer!!