# (Squarespace) How to add Related Projects in Portfolio page

**URL:** <https://community.elfsight.com/t/squarespace-how-to-add-related-projects-in-portfolio-page/133140>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [July 24, 2025, 2:11am UTC](https://community.elfsight.com/t/squarespace-how-to-add-related-projects-in-portfolio-page/133140 "2025-07-24T02:11:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [July 24, 2025, 2:11am UTC](https://community.elfsight.com/t/squarespace-how-to-add-related-projects-in-portfolio-page/133140/1 "2025-07-24T02:11:43Z")

</div>

To add Related Projects in Portfolio Page, like this.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/3/93f3ce9e6787a41b8ae12c66af873cd999ca74fe.jpeg)

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/5/656d795115d6aec0e060a8eaa29c05994f0ceb47.jpeg)

**#2.** Next, use this code to Code Injection \> Footer  
You can also **[use this Portfolio tool](https://go.elfsight.io/click?pid=9&offer_id=4&path=/portfolio-widget/)** so you can add/customize Portfolio easier.

```auto
<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>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/1/b160554487d7fadd33ef3956179afdc7c0b74c1f.jpeg)

**#3.** Remember to update Portfolio Page URL.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/8/3848c53dad6222839ee2d5a3f474cfacf658a1e1.jpeg)

and here

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/c/3c06a836e31ba306821b997e813d3c9100266af7.png)