Pinterest-Style Cascading Grid Layout

Questions
1

Hello Everyone! :slight_smile: I was recently reading about Pinterest and how they use a ‘cascading grid layout’ for their website. The article I read led me to this link: http://masonry.desandro.com/ with instructions on how to install this ‘cascading grid layout’ on a website with JavaScript. I honestly don’t know very much at all about JavaScript and just wanted to ask if this is something that would be possible for me to implement in a Bubble app (with some learning/practice of understanding JavaScript on my part)? If this is not possible for me to try to implement at this time I completely understand that too of course!

Thank you so much!!

Sincerely,

Faye

1 Like
2

Hello Faye,

At this point I don’t think that it’s possible to use custom JS in a Bubble site. However, you could probably accomplish something similar to their layout by using a repeating group element. It may be a little difficult to do the thumbnail offset, though. Play around with it and see what you can do.

Let me know if you have any questions and I’ll see if I can help.

3 Likes
3

Hi Chris!

Thank you so much for the info! I have a repeating group right now and everything really looks great. It has 4 columns, 4 rows, vertical scrolling, and an image in each cell with a short text description under each image. Everything looks how I was hoping it would, just some descriptions are longer than others creating the spaces in cells with short descriptions. However, it definitely still looks awesome in the repeating group as is so I’ll stay with that :slight_smile: I think another thing I should do is to set a limit on the amount of characters for the description which I didn’t do before!

Thank you again Chris!

Sincerely,

Faye

3 Likes
4

Faye do you have an example of this to share? I’m trying to do something similar. Would love to see your solution, I bet it’s ace.

1 Like
5

Hey Greg! :slight_smile: I actually just ended up using a repeating group for this. How many items are you looking to display in this format (I was thinking a similar ‘cascading’ style could be accomplished using groups within a cell of a repeating group, and then having that repeat).

6

Thanks for getting back to me Faye. :sunglasses:

My idea is to create a moodboard app similar to Pinterest but without the fluff, just clean images like below.

I’d want 4 columns of fixed width but want the height to collapse negative space between images. I want people to be able to upload images of varying widths and heights.

Does your solution do this?

Screen Shot 2016-11-02 at 09.38.47.png800×447 514 KB

1 Like
7

If I create 1 row and 4 columns, then set the images to ‘adjust element height’ I get the desired effect. I just need to figure out how a user can upload a single image and add it to the board.

8

Yes, I think this is possible with a few workarounds. :slight_smile: I just created this forum example:

Preview:

Editor:

So if you kept your setup with 1 row with 4 columns, that would have the element height of each image adjust in the cell, but the horizontal dividers would remain the same from row to row (shown below)

blob.jpg969×630 150 KB

To workaround having negative space between the rows, I created four repeating groups (1 column, 4 rows) with extended vertical scrolling. In your application the data structure will be different, but in the forum example I just created a new Data Type called “Pinterest Grid”:

With this setup, each Image also has an assigned “Group Number” (1, 2, 3 or 4). This is because there are four repeating groups (each with only one column):

blob.jpg1052×484 55 KB

Each repeating group does a “Search for Pinterest Grids”, and in that constraint is a Group Number.

For example, in the first repeating group on the far left, the search constraint is this:

blob.jpg698×563 64.3 KB

The second group only shows ‘Group 2’ images:

blob.jpg743×519 64.8 KB

And that same process repeats for the 3rd and 4th Repeating Groups. With this setup, there won’t be any negative space between the rows. To make sure everything was adjusting, I created these entries within the App Data tab:

In preview mode the repeating groups adjust dependent upon the image, as well as the text element within the cell. In this example, I used static text within the text element, but the text you use could definitely be the result of a dynamic expression (a caption of the image created by the User, for example).

blob.jpg1048×592 204 KB

This way, there won’t be any wasted space because the cell in each repeating group adjusts its height. I haven’t done this with User uploaded images, but I think this is definitely possible if you were to create a workflow which detected which Group number should be assigned to the User’s most recently uploaded image. If this is something you’d like to set up in your app, I can definitely try to help with the data structure/workflow parts to ensure that everything is uploaded in the correct order.

7 Likes
9

@fayewatson this is brilliant!!! :grinning:

Thanks for being so smart.

I’m going to give this a go shortly.

1 Like
10

Sounds great Greg! :smiley: Excited to see if this solution works out for you! Will test some workflows for submitting pictures in the forum app now.

1 Like
11

Ok, I just tested everything and I think this works as expected. :slight_smile: Here’s a new forum page I created with the picture input and workflows to save the image to the Current User. You can test everything as well in the forum app and it will save to the Current User (even if you’re logged out of the forum app).

Preview:

Editor:

With data:

blob.jpg1089×644 134 KB

In summary, each repeating group has conditional formatting which changes the repeating group’s data source based on the Group number of the User’s most recently uploaded image. This way, the most recently uploaded image is always in the top left cell in the 1st column (similar to uploading something to Instagram). Each repeating group involves a lot of conditional formatting statements, but I think the loading time is still fine and each repeating group column updates very quickly after each picture upload.

2 Likes
12

This is such a clever hack. Well done!!

1 Like
13

Thank you so much @geo.chiv.george! :smiley:

2 Likes
14

You’re awesome, @fayewatson

2 Likes
15

Gaby, you’re the best - Thank you! :blush:

2 Likes
16

Extending Faye’s idea is to have nested repeating groups. The outer groups searches for all images. The inner group filters the list from the outer group according to which number it is, which it gets from the current cell index.

This works well for being responsive, it can have 4 columns down to 1 column depending on page width.

My test picture selection isn’t as nice as yours!

I noticed the pictures at the bottom become uneven, the method depends on the average picture height being consistent.

blob.jpg848×984 223 KB

2 Likes
17

That is a much cleaner solution to have the inner, filtered repeating group’s constraint be the current cell’s index - Great idea. I’ll definitely be doing that from now on! Thank you @mishav :slight_smile:

1 Like
18

I looked into it a bit more … if in responsive mode it becomes three columns, then the pictures from groups 1 to 3 are laid out nicely, then group 4 is all piled up under group 1 in a long column.

So the caveat is, the division of the pictures needs to match the number of displayed columns.

Edit: it’ll be fine with 1 column (obviously), 2 columns will have group 1 and 2 at the top and group 3 and 4 underneath so it will also look fine. Just when displaying three columns it’s an issue.

1 Like
19

[solved] Hello there @mishav. Would you be able to provide the link to this pinterest style grids editor? Thanks.

I figured it out. Thanks.

20

Now what we really need is a search bar at the top which keeps the same type of ‘Pinterest’ grid layout to display it’s results… somewhat tricky though, I’ve been failing miserably :frowning: