(Squarespace) How to add Related Projects in Portfolio page

[tuanphan]

To add Related Projects in Portfolio Page, like this.

#1. First, find Portfolio Page URL In my example, it is: /projects

#2. Next, use this code to Code Injection > Footer
You can also use this Portfolio tool so you can add/customize Portfolio easier.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    const pagination = $('.item-pagination[data-collection-type^="portfolio"]');
    
    if (pagination.length > 0) {
        $.ajax({
            url: '/projects',
            method: 'GET',
            dataType: 'html',
            success: function(html) {
                const $tempDiv = $('<div>').html(html);
                const $gridThumbs = $tempDiv.find('#gridThumbs').clone();
                
                if ($gridThumbs.length > 0) {
                    pagination.after($gridThumbs);
                    
                    setTimeout(function() {
                        $gridThumbs.find('img[data-loader="sqs"]').each(function() {
                            if (this.dataset && this.dataset.src) {
                                this.src = this.dataset.src;
                                this.style.opacity = '1';
                            }
                        });
                    }, 100);
                }
            },
            error: function(xhr, status, error) {
                console.log('Error fetching portfolio HTML:', error);
                
                $.ajax({
                    url: '/projects?format=json-pretty',
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (data.items && data.items.length > 0) {
                            let itemsHtml = '<div id="gridThumbs" class="portfolio-grid-basic grid-wrapper collection-content-wrapper preFade fadeIn" data-animation-role="section" style="transition-timing-function: ease; transition-duration: 0.4s; transition-delay: 0.315s;">';
                            
                            data.items.forEach(function(item) {
                                const imageUrl = item.assetUrl;
                                const srcset = `${imageUrl}?format=100w 100w, ${imageUrl}?format=300w 300w, ${imageUrl}?format=500w 500w, ${imageUrl}?format=750w 750w, ${imageUrl}?format=1000w 1000w, ${imageUrl}?format=1500w 1500w, ${imageUrl}?format=2500w 2500w`;
                                
                                itemsHtml += `
                                    <a class="grid-item" href="${item.fullUrl}">
                                        <div class="grid-image">
                                            <div class="grid-image-inner-wrapper">
                                                <img data-src="${imageUrl}" data-image="${imageUrl}" data-image-dimensions="${item.originalSize}" data-image-focal-point="0.5,0.5" alt="${item.title}" data-load="false" elementtiming="nbf-portfolio-grid-basic" src="${imageUrl}" width="${item.originalSize.split('x')[0]}" height="${item.originalSize.split('x')[1]}" sizes="(max-width: 767px) 100vw, 50vw" style="display:block;object-position: 50% 50%" srcset="${srcset}" loading="lazy" decoding="async" data-loader="sqs">
                                            </div>
                                        </div>
                                        <div class="portfolio-text">
                                            <h3 class="portfolio-title preFade fadeIn" style="transition-timing-function: ease; transition-duration: 0.4s; transition-delay: 0.33s;">${item.title}</h3>
                                        </div>
                                    </a>
                                `;
                            });
                            
                            itemsHtml += '</div>';
                            pagination.after(itemsHtml);
                        }
                    }
                });
            }
        });
    }
});
</script>

#3. Remember to update Portfolio Page URL.

and here