Use masonry style layout for Portfolio page

Hello,

First time posting here, but I have a question regarding a request from my client.

Basically, she wants to have the portfolio page to look like this: https://www.furrylittlepeach.com/ (images shown in a masonry style layout).

I know you can achieve this by using a Gallery block, but in this case we would want to use it for the Portfolio page. I assume you'd need custom code for that? Unfortunately the styles provided by the Portfolio page don't allow that type of layout.

Thanks in advance!

On 5/17/2021 at 6:21 AM, simtom said:

Hello,

First time posting here, but I have a question regarding a request from my client.

Basically, she wants to have the portfolio page to look like this: https://www.furrylittlepeach.com/ (images shown in a masonry style layout).

I know you can achieve this by using a Gallery block, but in this case we would want to use it for the Portfolio page. I assume you'd need custom code for that? Unfortunately the styles provided by the Portfolio page don't allow that type of layout.

Thanks in advance!

Try this javascript plugin

Macy.js - A lightweight, dependency free, JavaScript masonry layout library (macyjs.com)

6 hours ago, bangank36 said:

Try this javascript plugin

Macy.js - A lightweight, dependency free, JavaScript masonry layout library (macyjs.com)

Thanks for the plugin, bangank36! Unfortunately our plan doesn't allow code injection so I think we'll have to find some other solution.

1 hour ago, simtom said:

Thanks for the plugin, bangank36! Unfortunately our plan doesn't allow code injection so I think we'll have to find some other solution.

Pure css solution is worth looking

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

6 minutes ago, bangank36 said:

Pure css solution is worth looking

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

Thanks for the link! I assume this requires more than just copy/paste? In a distant past I used to have coding experience but that sadly has faded away.

5 minutes ago, simtom said:

Thanks for the link! I assume this requires more than just copy/paste? In a distant past I used to have coding experience but that sadly has faded away.

yes it is just a start...

Problem here is that the portfolio page doesn't allow to display images in their original format, you have to force the format. So Masonry wouldn't work. I don't actually understand why Squarespace doesn't allow that option, it would make totally sense.

Hello @simtom !

I'm trying to do exactly the same thing, did you manage to do it ?

Thank you !

On 7/22/2022 at 10:46 PM, Delbaz said:

Hello @simtom !

I'm trying to do exactly the same thing, did you manage to do it ?

Thank you !

Hello there,

We actually ended up using a normal page, but with a Gallery and then used the Grid: Masonry gallery type.

On 7/24/2022 at 9:19 PM, simtom said:

Hello there,

We actually ended up using a normal page, but with a Gallery and then used the Grid: Masonry gallery type.

I'm guessing you lose the functionality of the portfolio this way and have to manually link up the portfolio pages when you create a new thumbnail?

It's a shame we can't just adjust the portfolio grid.

Wanted to post as I was also looking for the answer and then found a solution.

When you want to add a gallery to a page, rather than selecting the "gallery" option, instead choose "summary" and then on the "design" tab select "wall".

If you just want a photo masonry grid, it gives you the option to hide any titles or excerpts. I think this was intended for blog posts, but it works for galleries too! (I did this in 7.0)