Jump to content

Use masonry style layout for Portfolio page

Recommended Posts

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!

Link to comment
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)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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/

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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...

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 5 months later...
  • 8 months later...
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.

Link to comment
  • 2 months later...
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.

Link to comment
  • 1 year later...

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)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.