Jump to content

How to change portfolio gallery settings across pages?

Recommended Posts

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?

Link to comment
  • 3 weeks later...
  • 3 weeks later...

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. 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

@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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...

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?)

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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".

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

@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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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!

Edited by axelvargas
typo
Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.