Using Squarespace Summary Blocks
A summary block is a grid, list or carousel of images or text that displays an archive from a chosen section of your website! You can use a summary block as a 'related posts' carousel at the bottom of your blog posts, as an archive grid displaying your website's posts and pages, and more! Our step-by-step guide will show you how to create any number of useful summary blocks for your Squarespace website, no custom code required.
For example, here's a summary block that displays an archive, or 'summary' of posts from our website blog. We've chosen to display the summary block as a 'grid' of images.
Here's how YOU can create a summary block!
1. Hover over your website's content area until you see those black, sideways balloons with a line to indicate where the new content block will fall. Click the balloon, and you will see a new window appear with your content block options.
2. When the pop-up window appears, scroll down through the options until you see the 'Summary' block section. We selected a 'Grid' format with the above example.
3. Another new pop-up window will appear with display options for your summary block. First, select the collection from your website that you'd like to make into a summary block. We chose 'Blog View' for ours, as that's our only collection.
4. In this window, notice a tab titled 'Layout', which allows you to choose the summary block layout, including how the images will display. If you'd prefer a 'wall', 'carousel' or 'list' summary block layout, you can make that change right here!
You can also select the aspect ratio of the images your summary block will display. Click through the options to see a live preview of how these aspect ratio changes affect the images in your chosen collection. For our 'grid' summary block, we chose '2:3 Standard (Vertical)' as our aspect ratio, which displays our images as if they're posters.
5. You can also choose the width of your grid's columns - how large or small your images will appear. The smaller the column width, the smaller the images, and the more items can display in one row. The number of columns displayed will also vary based on the width of your website.
The 'gutter width' is the width between each column. Again, the smaller the gutter width, the more items can display in one row.
You can also choose display options for text, such as titles, dates and other metadata. You can align the text center, left or right, and choose to display this text above or below your images.
6. You will see the option 'Display' as the final menu option in this small, pop-up window. Here you can choose what information you'd like to display in your summary block, such as titles, excerpts, dates, and other metadata. You can even choose not to display images, displaying text-only.
This area also allows you to choose the 'number of items' to display in your summary block. However, a summary block can only display up to 30 items.
So, if you have 34 items you wish to display with this one summary block, the 4 items beyond 'item number 30' will not be displayed. In that case, you might want to make a second summary block that will display those last, 4 posts.
You can pick and choose which items to display in your summary block by using multiple tag words or categories.
7. In other words, you can make a summary block that pull content from certain categories and #tag words you've used, minimizing the amount of content per summary block. Making the tags and categories more specific will shorten the list of displayed items, allowing you to display precisely the ones you'd like.
You can get even more specific by adding multiple tags to a summary block - a feature that Squarespace help pages do not mention.
Below, see a screenshot we took displaying a summary block with multiple tags. This is how you will setup your multiple tags so they display in your summary block: love,hate,yes,no.
As you add more tag words, the live preview will change to reflect your tag word changes. This will also make your content block even more specific, which is great for a 'related posts' carousel at the bottom of a blog post. We're using them on our Meeting In The Media blog posts, ourselves!
Related Posts Carousel
If you've been following Meeting In The Media, you've noticed that we use a 'related posts' carousel at the bottom of each blog post. This carousel is none other than a summary block that we manually add to each post, as Squarespace templates do not automatically generate a 'related posts' block or widget.
Simply follow the above steps in order to create a summary block, but select the summary block format 'carousel' rather than 'grid.' You can choose the desired image ratio, such as the '3:2 Standard' ratio that we use on our 'read more' carousels.