Jump to content

Custom Summary Block Image Layout

Recommended Posts

This is a fun one! I've not tried to recreate this before, so it'll need some tweaking to get it right, but add this to your custom CSS and maybe we have a start...

.portfolio-grid-basic {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(10vh, auto))
}
.grid-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.grid-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.grid-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.grid-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.grid-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

 

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
16 minutes ago, Ziggy said:

This is a fun one! I've not tried to recreate this before, so it'll need some tweaking to get it right, but add this to your custom CSS and maybe we have a start...

.portfolio-grid-basic {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(10vh, auto))
}
.grid-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.grid-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.grid-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.grid-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.grid-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

 

Thanks for helping, I've added this to my custom CSS, but nothing has changed yet.

Tim Marner®
Award-Winning Branding Agency In Bolton

https://timmarner.co.uk/

Link to comment

Sorry, wrong grid type, try this:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

You'll have to make the column width in the summary settings as large as you can.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
9 minutes ago, Ziggy said:

Sorry, wrong grid type, try this:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

You'll have to make the column width in the summary settings as large as you can.

Hi, i've put this code in and it's definitely closer! I've also made the column width 600px (the highest you can do)

Tim Marner®
Award-Winning Branding Agency In Bolton

https://timmarner.co.uk/

Link to comment

In my testing this works well if you make the summary block narrower.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 minutes ago, Ziggy said:

In my testing this works well if you make the summary block narrower.

I see that when I make it smaller!

Is it possible to make this work when its full width?

And can it be designed so the big image takes up 50% of the width, and each smaller image takes 25% of the width? Right now the big image takes up more width than I would like

Edited by TimMarner
typo

Tim Marner®
Award-Winning Branding Agency In Bolton

https://timmarner.co.uk/

Link to comment

I'm butting my head up against the full-width not working, but try this update:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 2';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'3 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'3 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 2';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 2';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'3 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'3 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 minutes ago, Ziggy said:

I'm butting my head up against the full-width not working, but try this update:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 2';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'3 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'3 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 2';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 2';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'3 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'3 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }

 

This works! the images are the right width now 🙂

I'm still looking for it to fill the screen more if you can get the whole thing to work wider?

Is it also possible to ignore all of this code on mobile? Leaving the summary block as it was before for just mobile?

Tim Marner®
Award-Winning Branding Agency In Bolton

https://timmarner.co.uk/

Link to comment

I'll have another charge at the width issue tomorrow.

To apply just to desktop:
Add this in front of the code (with a } after and previous code inbetween)

@media only screen and (min-width:768px) {
   ///REPLACE WITH CODE///
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
16 hours ago, Ziggy said:

I'll have another charge at the width issue tomorrow.

To apply just to desktop:
Add this in front of the code (with a } after and previous code inbetween)

@media only screen and (min-width:768px) {
   ///REPLACE WITH CODE///
}

Thank you! Looks great on mobile now 🙂

That would be great if you could get it full width too !

And I was also wondering if there is a way to fill the white space in the image attached?

So that the bigger image block (including the title) is the same height as the two image blocks to the side of it

White Gap.png

Tim Marner®
Award-Winning Branding Agency In Bolton

https://timmarner.co.uk/

Link to comment

This might need just applying just to the large images, but try it like this anyway:

.summary-thumbnail .img-wrapper {
  padding-bottom:90%;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.