custom gallery layout

Site URL: https://adincampbell.com/

Hi. I think this is possible with Sections Only + Custom Code

Or Gallery Section + Code

or List Section

Do you still need help on this?

6 hours ago, tuanphan said:

Hi. I think this is possible with Sections Only + Custom Code

Or Gallery Section + Code

or List Section

Do you still need help on this?

Hi I've tried using Sections but I like the idea of being able to hover over and click the entire section. I think gallery + code is the closest yet. I have used some custom css to make the gallery 1 row down. Other than that I couldn't figure out how to alternate the gallery items left and right and add a box to the opposite side moving the text and description into that as well.

On 3/30/2022 at 12:05 AM, adincampbell said:

Hi I've tried using Sections but I like the idea of being able to hover over and click the entire section. I think gallery + code is the closest yet. I have used some custom css to make the gallery 1 row down. Other than that I couldn't figure out how to alternate the gallery items left and right and add a box to the opposite side moving the text and description into that as well.

Can you share link to page where you added? We will try some code

On 4/1/2022 at 3:12 AM, tuanphan said:

Can you share link to page where you added? We will try some code

Heres the page: https://cod-smilodon-fkfw.squarespace.com/

On 4/6/2022 at 2:15 AM, adincampbell said:

Heres the page: https://cod-smilodon-fkfw.squarespace.com/

Add to Design > Custom CSS

/* Portfolio Page - Custom Layout */
@media screen and (min-width:768px) {
	.portfolio-grid-overlay .grid-item {
    height: auto !important;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 0 !important;
}
.portfolio-grid-overlay .grid-item>div {
    width: 50% !important;
    float: left !important;
    opacity: 1 !important;
    padding: 0 !important;
}
.portfolio-text {
    position: relative !important;
}
.portfolio-overlay {
    display: none !important;
}
div#gridThumbs>a:nth-child(even) {
    flex-direction: row-reverse !important;
}
.grid-image-inner-wrapper {
    position: relative !important;
}}

21 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Portfolio Page - Custom Layout */
@media screen and (min-width:768px) {
	.portfolio-grid-overlay .grid-item {
    height: auto !important;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 0 !important;
}
.portfolio-grid-overlay .grid-item>div {
    width: 50% !important;
    float: left !important;
    opacity: 1 !important;
    padding: 0 !important;
}
.portfolio-text {
    position: relative !important;
}
.portfolio-overlay {
    display: none !important;
}
div#gridThumbs>a:nth-child(even) {
    flex-direction: row-reverse !important;
}
.grid-image-inner-wrapper {
    position: relative !important;
}}

 

Thanks so much! Works great. Modified the code a little bit added some subheadings and here is how it looks now: https://cod-smilodon-fkfw.squarespace.com/

Instead of disabling portfolio overlays:

I am trying to keep those hover animations though, and have them reversed instead where hovering over transitions/inverts the text color and the banner overlay darkens when hovering over. Example: https://adincampbell.com/ Been trying to figure that out.

Also the page does flicker quite a bit when reloading the page. Not sure what is causing this in the custom css but I think it has to do with it overriding squarespaces default settings in portfolio grid settings with the custom css, not sure if there is a workaround for this.