Portfolio Grid Padding, Background and Hover SQSP 7.1

Hi all,

I updated to 7.1 and it didn't hit until 10 days into remaking my site that I realize a lot of the options we where offered in 7.0 are gone.

I am trying to get this effect from the old York template (york-demo.squarespace.com) where grid items could have padding around them that matched the background/edge color of it's respective grid item image. It also made the fill color in the hover state match this same image color.

I like everything else in 7.1 and spent so much time already migrating to it, so I don't want to revert back. I scoured the forums and got close to the desired old effect with a frankenstein mix and match, but it has its faults incl:

- Crops off images that arent at 1:1 ratio even with padding

- I dont know how else to identify diff grid items other than by doing the nth-of-type(#) solve, which is not ideal esp since I will have 2 diff portfolio pages with unique thumbnails

- Is there a code I could use that detects the edge color of a thumbnail image to "autocolor" its padding background/hover state instead of manually inputting hexcode? This would make it easier for adding new projects or updating thumbnails of old ones.

Here's my current code. Will welcome any and all improvements to it, esp prioritizing the above issues + streamlining it.

/* Change Grid Item BG Colors */
.portfolio-grid-overlay .grid-item:nth-of-type(1) {
  background-color: #A0DFAD;
}
.portfolio-grid-overlay .grid-item:nth-of-type(2) {
  background-color: #0649DA;
}
.portfolio-grid-overlay .grid-item:nth-of-type(3) {
  background-color: #FAB827;
}
.portfolio-grid-overlay .grid-item:nth-of-type(4) {
  background-color: #fff;
}
.portfolio-grid-overlay .grid-item:nth-of-type(5) {
  background-color: #D05541;
}
.portfolio-grid-overlay .grid-item:nth-of-type(6) {
  background-color: #221749;
}
.portfolio-grid-overlay .grid-item:nth-of-type(7) {
  background-color: #080823;
}
.portfolio-grid-overlay .grid-item:nth-of-type(8) {
  background-color: #F7E7E4;
}
.portfolio-grid-overlay .grid-item:nth-of-type(9) {
  background-color: #FFC686;
}


/* Change Grid Item Hover Colors */
.portfolio-grid-overlay .grid-item:nth-of-type(1) .portfolio-overlay {
  background-color: #A0DFAD;
}
.portfolio-grid-overlay .grid-item:nth-of-type(3) .portfolio-overlay {
  background-color: #FAB827;
}
.portfolio-grid-overlay .grid-item:nth-of-type(4) .portfolio-overlay {
  background-color: #BDC1C6;
}
.portfolio-grid-overlay .grid-item:nth-of-type(5) .portfolio-overlay {
  background-color: #D05541;
}
.portfolio-grid-overlay .grid-item:nth-of-type(6) .portfolio-overlay {
  background-color: #221749;
}
.portfolio-grid-overlay .grid-item:nth-of-type(7) .portfolio-overlay {
  background-color: #080823;
}
.portfolio-grid-overlay .grid-item:nth-of-type(8) .portfolio-overlay {
  background-color: #F7E7E4;
}
.portfolio-grid-overlay .grid-item:nth-of-type(9) .portfolio-overlay {
  background-color: #FFC686;
}


{
    padding: 85px;
    margin: 0; /* You may want to reset margin depending on your layout */
    box-sizing: border-box; /* This ensures that padding is included in the element's total width and height */
}

Website Portfolio links:

https://verogmz.com/work

https://verogmz.com/graphic (2nd portfolio placeholder for ref to see how nth-of-type solve isnt ideal)

PW: buttercup

Thank you so much for taking the time!

It should be possible to 

On 12/31/2023 at 6:24 PM, donovansane said:

I am trying to get this effect from the old York template (york-demo.squarespace.com) where grid items could have padding around them that matched the background/edge color of its respective grid item image.

A number of steps will be required to replicate the York feature on version so that it is automated. Taking the first one - setting the background colour - the York template does this with JavaScript and so it should be possible to do the same on 7.1. Of course, the code will need to be written manually because, as you said, it isn't a built-in feature on the newer version.

The JavaScript should be written to wait for the page (and hence the images) to fully load. It should then loop through each of the grid-items on the page to find the corresponding img within each one. The Canvas API can then be used to detect the colour of a pixel from the image and then apply that colour to the background-color of each image. This should avoid the need to manually set the colour of each one.

I hope this helps to get you started.

Thank you for these!

@paul2009, I sadly dont know much java script, what would the code look like to make this work? Would help so much in streamlining/ease but I know thats a wishlist item

@tuanphan, I applied your code to the system I had already since it seemed when I did it exactly like yours, it overrode the padding I had, so this is what it looks like now:

/* Change Grid Item BG Colors */
.portfolio-grid-overlay a.grid-item[href="/work/shea"], a.grid-item[href="/work/shea"] .portfolio-overlay {
	background-color: #a0dfad;
}
.portfolio-grid-overlay a.grid-item[href="/work/ibm"], a.grid-item[href="/work/ibm"] {
  background-color: #0649DA;
}
.portfolio-grid-overlay a.grid-item[href="/work/wmhd"], a.grid-item[href="/work/wmhd"] .portfolio-overlay {
  background-color: #FAB827;
}

/* Replace ".your-grid-thumbnail-class" with the actual class or identifier for your grid thumbnail */
.grid-image-inner-wrapper {
    /* Adjust the values as needed */
    padding: 25%;
    margin: 0; /* You may want to reset margin depending on your layout */
    box-sizing: border-box; /* This ensures that padding is included in the element's total width and height */
}

A question for both of y'all: Is there a way to ensure that thumbnails that aren't exactly 1:1 dont get cropped out? For example, Meta's World Mental Health Day

Thank you again for the help so far!

@donovansane Try this CSS code

a.grid-item img {
    object-fit: contain !important;
}

@tuanphan, worked amazing, thanks so much!