🚀 [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