How to change portfolio gallery settings across pages?

I'm trying to create multiple portfolio "Grid: Overlay" project style pages, but want to have different gallery image sizes on each page (i.e. 16:9 aspect and 4 rows on home page, 1:1 and 2 rows on a different page).

Whenever I change the settings for one page though, it changes the project gallery settings across all pages. I don't know a workaround for this, and am trying to avoid custom CSS.

Any ideas what I can do to achieve this?

I'm having the same issue! Don't know why it happens as you can have a different layout for each project. Super annoying as i'm now having to think about a different/ longer way of doing it.

I am also wondering how to change this. I want to have one portfolio page have 4 columns vertical format and one portfolio page have 3 columns horizontal format, but every time I change one they both change. Isn't there a way to have two separate portfolio layouts? Seems odd to have to only allow the same format across the entire website. 

11 hours ago, cberty43 said:

I am also wondering how to change this. I want to have one portfolio page have 4 columns vertical format and one portfolio page have 3 columns horizontal format, but every time I change one they both change. Isn't there a way to have two separate portfolio layouts? Seems odd to have to only allow the same format across the entire website. 

Your can use CSS to do this. Can you share link to portfolio page where you want 3 columns?

@tuanphan

I'm having the same issue. I want my graphic design portfolio have have 3 columns with square photos, but my photography portfolio pages to have 2 columns (2:3 ratio). How can I achieve this?

site: https://ellipse-gardenia-pj4s.squarespace.com/
password: 2020

Did you solve this problem? I'm having the same problem now. Thanks.

I've contacted Squarespace about this very issue but they were unable to offer the assistance that I was looking for. Has anyone managed to solve this highly frustrating problem? 

On 9/15/2020 at 11:45 AM, EDIT said:

Did you solve this problem? I'm having the same problem now. Thanks.

On 9/16/2020 at 12:41 AM, MichaelPrince said:

I've contacted Squarespace about this very issue but they were unable to offer the assistance that I was looking for. Has anyone managed to solve this highly frustrating problem? 

You can share link to portfolio page, we can check easier.

I am also having this problem. I see someone shared their portfolio page but nothing was done.

I want 16:9 images on this page: https://nicholaskohut.com/films

And 1:1 images on this page: https://nicholaskohut.com/music

On 11/12/2021 at 1:14 AM, Squid said:

I am also having this problem. I see someone shared their portfolio page but nothing was done.

I want 16:9 images on this page: https://nicholaskohut.com/films

And 1:1 images on this page: https://nicholaskohut.com/music

Add to Music Page Header then save & reload the site

<style>
  .tweak-portfolio-grid-overlay-image-aspect-ratio-169-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-169-widescreen .portfolio-grid-overlay .grid-item {
    padding-bottom: 100% !important;
}
</style>

This does not seem to have been updated yet, to make it easier for non-coding people.  I also want to customize multiple project pages within my portfolio area, but any layout changes appear to be global - very frustrating. 

Is there any sort of guide for CSS customizations within Squarespace? (Especially for people who have no experience with coding?)

23 hours ago, GeezyWee said:

This does not seem to have been updated yet, to make it easier for non-coding people.  I also want to customize multiple project pages within my portfolio area, but any layout changes appear to be global - very frustrating. 

Is there any sort of guide for CSS customizations within Squarespace? (Especially for people who have no experience with coding?)

If you share link to page & what is your problem, we can help easier

My page isn't published yet - I'm still working to lay everything out. 

For example, "portfolio A" I have set to 2 columns, with each project image at a 16:9 widescreen aspect ration.  I cannot set a different layout for "portfolio B" (let's say 3 columns of projects, with square project images), without that change affecting "portfolio A".

15 hours ago, GeezyWee said:

My page isn't published yet - I'm still working to lay everything out. 

For example, "portfolio A" I have set to 2 columns, with each project image at a 16:9 widescreen aspect ration.  I cannot set a different layout for "portfolio B" (let's say 3 columns of projects, with square project images), without that change affecting "portfolio A".

If the site is trial, you can setup password & share url

Hello! Over a year later and I am finding that I'm having this issue as well. I'm wondering if anything has been updated yet. My page isn't published yet, but I'm wanting to make portfolio A 1x1 ratio and Portfolio B a 3:4 vertical ratio. 

Any support is appreciated!

I am noticing this code below, and imagine it would apply but not exactly sure what to change - thinking it might just be "–34-vertical .portfolio.. "

<style>
  .tweak-portfolio-grid-overlay-image-aspect-ratio-169-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-169-widescreen .portfolio-grid-overlay .grid-item {
    padding-bottom: 100% !important;
}
</style>

11 hours ago, amb24 said:

Hello! Over a year later and I am finding that I'm having this issue as well. I'm wondering if anything has been updated yet. My page isn't published yet, but I'm wanting to make portfolio A 1x1 ratio and Portfolio B a 3:4 vertical ratio. 

Any support is appreciated!

I am noticing this code below, and imagine it would apply but not exactly sure what to change - thinking it might just be "–34-vertical .portfolio.. "

<style>
  .tweak-portfolio-grid-overlay-image-aspect-ratio-169-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-169-widescreen .portfolio-grid-overlay .grid-item {
    padding-bottom: 100% !important;
}
</style>

Just use last class name only

<style>
  .grid-item {
    padding-bottom: 100% !important;
}
</style>

Thank you! Just to clarify – where should I add this code? I'm not seeing an option in the header of the page, but this may be because I need to upgrade my account. 

I did add a password to the page if that is easier to view! alibibbo.com, password is openme. 

I'm wanting the "Work" page to be as is (1x1), and the Photography page to be 2 columns, 4:3 vertical. (I'm deleting the video page). 

Really appreciate your help!

Ali

6 hours ago, amb24 said:

Thank you! Just to clarify – where should I add this code? I'm not seeing an option in the header of the page, but this may be because I need to upgrade my account. 

I did add a password to the page if that is easier to view! alibibbo.com, password is openme. 

I'm wanting the "Work" page to be as is (1x1), and the Photography page to be 2 columns, 4:3 vertical. (I'm deleting the video page). 

Really appreciate your help!

Ali

Add to Design > Custom CSS to change Photography Page

/* Photography Page */
body#collection-64835ef7bcf2954e26b57888 {
a.grid-item, .grid-image {
    padding-bottom: 175% !important;
}
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}}

Amazing! It worked! Thank you so much – really appreciate your help!

Ali

@tuanphan I also need some help with this.

I have several portfolio pages.

The first "polaroid" should be 3 columns with square ratio and a horizontal distance of 3.

The second "dogs" should be 2 columns with vertical ratio 3:4

The third one should be 3 columns square ratio but no horizontal distance

Please help!

On 10/11/2023 at 4:13 AM, rehkirsch said:

@tuanphan I also need some help with this.

 

I have several portfolio pages.

The first "polaroid" should be 3 columns with square ratio and a horizontal distance of 3.

The second "dogs" should be 2 columns with vertical ratio 3:4

The third one should be 3 columns square ratio but no horizontal distance

 

 

Please help!

You can set default with 3 columns

Then share link to dogs and third one page, I can give code to adjust columns on these page

Same issue here; I have three portfolio pages and had the first 2 set up as 2 columns 3:2 aspect ratio. I added a third portfolio page and wanted 4 columns and 1:1 ratio - once I did that it affected the other two portfolios... I've reverted back to the original 2 columns 3:2

How can I get this page to to disply 4, 1:1? https://www.bestridesdc.com/test-index

Thanks in advance!

On 12/2/2023 at 10:54 AM, frescova said:

Same issue here; I have three portfolio pages and had the first 2 set up as 2 columns 3:2 aspect ratio. I added a third portfolio page and wanted 4 columns and 1:1 ratio - once I did that it affected the other two portfolios... I've reverted back to the original 2 columns 3:2

How can I get this page to to disply 4, 1:1? https://www.bestridesdc.com/test-index

Thanks in advance!

 

Add to Website Tools (under Not Linked) > Custom CSS

body#collection-656a228b46ffdd3222f2e11d {
div#gridThumbs {
    grid-template-columns: repeat(4,1fr) !important;
}
.grid-image {
    padding-bottom: 100% !important;
}}

On 12/3/2023 at 10:35 PM, tuanphan said:

Add to Website Tools (under Not Linked) > Custom CSS

body#collection-656a228b46ffdd3222f2e11d {
div#gridThumbs {
    grid-template-columns: repeat(4,1fr) !important;
}
.grid-image {
    padding-bottom: 100% !important;
}}

 

hello @tuanphan, i'd appreciate your help:

i'm looking for the axelvargas.mx/clientes portfolio to have 3 columns, but axelvargas.mx/foto should have only 2 columns. could you help with the CSS snippet?

deeply appreciated, thanks!

4 hours ago, axelvargas said:

hello @tuanphan, i'd appreciate your help:

i'm looking for the axelvargas.mx/clientes portfolio to have 3 columns, but axelvargas.mx/foto should have only 2 columns. could you help with the CSS snippet?

deeply appreciated, thanks!

You can use this code to Custom CSS

@media screen and (min-width:768px) {
body#collection-61369efd259af547da3b6f9c div#gridThumbs {
    grid-template-columns: repeat(4,1fr) !important;
}
}