How to add a dynamic related article section into a Squarespace blog article

I tried to find a Squarespace article online to how I could add a dynamic related article section into my blog article page programmatically. The only support I got was from https://developers.squarespace.com/custom-query-tag.

So here is the code I used on my site utilising the above link.

Squarespace uses blog.item file as its default blog article template. And I added below code right below the aside tag inside the article tag.

And I added a few jQuery codes through Code Injection (<example.squarespace.com>/config/settings/advanced/code-injection)

The jQuery code was to achieve a few things that above code couldn’t do.

For instance, the squarespace:query will pull up all the articles from the blog collection into the related articles link. But I don’t want it to show the article that the user is already on.

// Hide blog article with same id on related articles block
 var blog_id = $(‘.blog-wrapper’).data(‘item-id’);
 if(blog_id) {
 $(‘#related-’ + blog_id).hide();
 }

Next, I wanted to create a link to navigate the user to all related blog articles. This is because I have added the limit parameter into squarespace:query tag.

// Populate view all by label
 var view_all_cat = $(‘#blog-category-name’).text();
 var view_all_cat_link = $(‘#blog-category-name’).attr(‘href’)
if (view_all_cat){
 var view_all_text = ‘View all by ‘ + view_all_cat + ‘ >’;
 $(‘#related-view-all-label’).text(view_all_text);
 $(‘#related-view-all-link’).attr(‘href’, view_all_cat_link);
 }
if($(“.custom-related-content > section”).length <= 1) {
 $(‘.custom-related-content’).hide();
 }

To get the look and feel, I had to add some custom CSS into the site using the Squarespace UI (<example.squarespace.com>/config/design/custom-css)

// Start related articles block
 .custom-related-content {
 width: 100%;
 display: inline-block;
 }
 .custom-related-content hr {
 margin-bottom: 50px;
 }
.custom-related-content .custom-related-content-title {
 font-weight: 600;
 }
.custom-related-content #related-view-all-link {
 bottom: 0;
 float: right;
 margin-top: 70px;
 }
 .custom-related-content #related-view-all-label {
 font-weight: 500;
 }
 .custom-related-content section {
 float: left;
 display: inline;
 }
 .custom-related-content section article {
 padding-bottom: 6%;
 padding-right: 14%;
 clear: left;
 }
 .custom-related-content section article .excerpt-thumb .excerpt-image {
 height: auto !important;
 }
 .custom-related-content section article .excerpt-thumb .excerpt-image img {
 position: unset !important;
 max-height: 185px;
 }
 .custom-related-content section article h2 {
 font-weight: 400 !important;
 text-align: left;
 }
 .custom-related-content .sqs-block-summary-v2 .summary-metadata-item {
 display: unset !important;
 float: left;
 }
 @media (min-width: 768px) {
 .custom-related-content section {
 width: 33.3%;
 }
 }
 @media (max-width: 768px) {
 .custom-related-content section {
 width: 100%;
 }
 .custom-related-content section article {
 padding-right: 0;
 }
 .custom-related-content section article .excerpt-thumb .excerpt-image img {
 max-height: 400px;
 }
 }
// End of related articles block

And the end result is as below.