Forum Documentation Showcase Pricing Learn more

🏓 Pinterest Style Grid - New Plugin from Zeroqode

This plugin will apply Pinterest style effect to your repeating groups

For details, screenshots and demos please visit the plugin page: at https://zeroqode.com/plugin/pinterest-style-grid-1548240582458x405448522443522050

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120

Bubble Templates

Bubble Plugins

Bubble Courses

Convert Web to iOS & Android

No-code Development Services

7 Likes

Hi @levon,

Thank you for this plugin.

I was able to make it work by replicating your setup. It works fine except that it’s cutting the content below the modified RG out of the page.

Did you encounter this problem before?

PS: I tried to send you a PM with the link to my editor but your inbox doesn’t seem to accept PMs anymore (too many requests maybe? ^^).

Ooh, this is tasty. Thanks Levon.

2 Likes

we’ll check this out Lucien!

our pleasure :slight_smile:

yep! PMs are not an efficient way to report bugs :slight_smile:

1 Like

Hi @levon,

I know it’s maybe not at the top of your priority list, but do you have a timeline for looking at this?

I saw that in your demo app you have two text elements below the Pinterest RG that also don’t show up in run mode.

By the way, any reason you have 2 Pinterest Elements on you test page?

@Lucien Hi Lucien,
we have fixed this issue, please upgrade the plugin and give it another try. i’ll check about your demo page question

Thanks Levon, that worked! The page height is now behaving normally.

I really prefer this plugin compared to the DIY solution explained in another thread, because, when the screen is narrow and there are less columns than initially defined, the logical order of the photos is kept (vs. one RG below the other with the DIY solution, if I understood it correctly).

To make this plugin really perfect, it would be great if:

  1. you could tweak it so that we can use the separator feature of an RG (more on this below);
  2. it wouldn’t systematically add a 400px padding (approx.) at the bottom of the group or page containing it.

Currently if I define a separator, this is the result I get:

Without the separator (and simply adding some padding to the photo inside the cell), I get something good, but not perfect:

If I try to compensate that right gap by having the RG expand slightly more to the right it breaks all the responsiveness:

If I put the RG into a group to control the horizontal alignment behavior, it doesn’t work (same visual result as above).

So the plugin is definitely usable now compared to the initial version, but for a perfect visual result it would be great if we could use the RG’s separator and not have the padding at the bottom. :pray:

Nb: we can observe the same thing on the demo page:

@Lucien
we have just pushed an update with following improvements:

  1. Added checkbox, Center Inside Elements. This will be centering each element in its container so that it’s all tidy.
  2. Fixed bottom excessive padding
    Please upgrade and give it a try
    thanks!

Hi Levon,

Thanks a lot!

For the centering, that solved it!

For the excessive bottom padding, it didn’t work for me, it’s still being added. Is there something specific to do? Or should the rearranged RG be of a specific/minimum height?

Hi Lucien,
we have done some further improvements, please upgrade and retry.
If it still doesn’t work as supposed to, please share some preview links so we can see.
Thanks!

Hi Levon,

Thank you for the plugin update. Unfortunately, it didn’t fix my issue with the extra bottom padding.

Here is the preview link: https://ohmygeorge.com/version-test/about

NB: if I don’t include the Pinterest RG in a separate group, what happens is that the extra bottom padding appears anyway at the bottom of the parent group, below every other content in that group.

hey, Lucien, our dev took a look and suggests taking the repeating group out of a group. can you experiment with that?

Hi Levon,

I set up this test page with nothing on it except the RG, and I set the page height to be the same as the RG’s height with 1 single row:

But in run mode, I still have the extra bottom padding (regardless of whether I use a full-list RG or extended vertical scrolling RG):

NB: I do trigger the arrangement with the condition when page loaded (entire).

@Lucien we have done some further improvements but that’s as far as we can control the behavior of the repeating group. please try and let us know if it’s acceptable now
thanks!

Hi Levon,

Thanks for all the tinkering. Unfortunately, this latest version adds even more bottom padding than the previous one (about twice as much), so I reversed to 1.3.0.

I guess I’m going to have to live with that padding.

Thanks for investigating.

I have quite a hard time setting this up. It seems like it gets broken once I put the repeating group inside another group? Also, is there a documentation or only the example project?If I click on the “documentation” link on the plugin website I get an url error saying “about:blank#blocked”

I copied the code from the example and got it to work. But it still looks like a normal repeating group. How do I get rid of the gaps like in the example?

Hey @a.hauber! Just bought this plug-in too, and it was a bit of experimenting to get it working well. Make sure of a couple of things to get it working nicely:

  • Set workflow When Page is Loaded (entirely) is “Yes” > Arrange Elements action.
  • Make sure the ID of the Repeating Group and the one in the action is the same.
  • Make sure the Repeating Group is visible on page load.

I also had the issue of the plug-in not working because my Repeating Group was within a tab (so hidden on page load) - causing the plug-in not to work. What I did then is change the workflow to:

  • When Repeating Group is visible > ArrangeElements.

Hope that helps, cheers!

2 Likes

Thanks @robbertmastebroek.

Hi, @a.hauber as Robbert said, please be sure to make the entire page loaded action wokflow set to Yes.
This could be seen in our demo page setup (https://bubble.is/page?type=page&name=pinterest_style_grid&id=zeroqode-demo-13&tab=tabs-1) :


Also make sure the ID of RG is same in action.

Regards,
ZQ Team.