(Squarespace) How to add Updated Date to Portfolio item

Pro Tips Other Tips
1

To add Updated date to Portfolio item, like this.

image
image700×381 79.9 KB

You can use this code to Code Injection > Footer

<script>document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.grid-item').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 updatedOn=data.item?.updatedOn;if(updatedOn){const date=new Date(updatedOn);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>

image
image700×352 54.4 KB

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

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

image
image532×568 31.2 KB

1 Like
2

Thanks for sharing! This script and CSS snippet make it easy to show the updated date on each portfolio item and style it to match your site.

1 Like