Display Portfolio Collection in Summary Blocks
What You'll Create
Portfolio collection items displayed inside Summary Blocks in Squarespace, complete with thumbnails, titles, excerpts, and working links. This technique fetches portfolio data and dynamically populates Summary Block items with real portfolio content, letting you use Summary Block layouts for portfolio display.
The Problem It Solves
Summary Blocks natively pull from blog posts, products, and events—but not portfolio collections. If you want the layout flexibility of Summary Blocks (list, carousel, grid) with your portfolio work, you're stuck with limited options. This technique bridges that gap by fetching portfolio data programmatically and injecting it into Summary Block items.
Perfect For
Portfolio sections using Summary Block carousel layouts, homepage featured work sections with grid displays, project showcases needing Summary Block styling options, sites wanting unified layouts across different collection types, designers who need more control over portfolio presentation.
What Makes This Different
Fetches portfolio data from Squarespace's internal system, then maps it onto existing Summary Block items. Handles image replacement (including focal point positioning), title/link updates, and excerpt injection. You can target by block ID or section anchor, and the code gracefully handles mismatched item counts by cycling through available portfolio items.
Details
Section Type: Fluid & Classic
Code Type: CSS + JavaScript
Prerequisites: Portfolio collection with items. Summary Block with list, carousel, or grid layout. Block ID or Section anchor for targeting.
Toolkit Title: Pull Portfolio Collection in Summary Blocks
Learn This Technique
This is one of 150+ code techniques taught inside Standout Squarespace, where you get:
The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support