(Squarespace) How to add metadata Date to Portfolio

[tuanphan]

To add metadata Date to Portfolio Page, like this.

You can use this code to Portfolio Page Header Injection (or Code Injection Footer)

<script>
document.addEventListener('DOMContentLoaded', function() {
    const portfolioItems = document.querySelectorAll('.grid-item');
    
    portfolioItems.forEach(item => {
        const href = item.getAttribute('href');
        if (!href) return;
        
        let url = href;
        if (href.startsWith('#')) {
            url = window.location.pathname + href;
        }
        
        const baseUrl = url.split('#')[0].split('?')[0];
        const jsonUrl = baseUrl + '?format=json-pretty';
        
        fetch(jsonUrl)
            .then(response => response.json())
            .then(data => {
                const publishOn = data.item?.publishOn;
                if (publishOn) {
                    const date = new Date(publishOn);
                    const options = { year: 'numeric', month: 'long', day: 'numeric' };
                    const formattedDate = date.toLocaleDateString('en-US', options);
                    
                    const portfolioText = item.querySelector('.portfolio-text');
                    const titleElement = item.querySelector('.portfolio-title');
                    
                    if (portfolioText && titleElement) {
                        const dateElement = document.createElement('div');
                        dateElement.textContent = formattedDate;
                        portfolioText.insertBefore(dateElement, titleElement);
                    }
                }
            })
            .catch(error => {
                console.log('Error fetching portfolio data:', error);
            });
    });
});
</script>

To change Date color, size, you can use this code to Custom CSS

div.portfolio-text>div {
    color: #000;
    font-size: 16px;
}