I recently created a Squarespace website using a template that features a unique masonry type gallery layout, which can be viewed at the following link: . Although I was drawn to this template specifically for its gallery design, I've encountered several limitations with the overall template, prompting me to essentially rebuild the site from scratch. As I am not in developer mode, my ability to modify the code is limited to adding code in the header, on individual pages (excluding the gallery), and sitewide in the footer using a code block. My primary objective is to find a solution that addresses these issues by adding code solely in the header.
The main drawback I've encountered involves the gallery functionality. By default, clicking on a thumbnail opens a lightbox rather than redirecting to a specific hyperlink. While Squarespace allows for the assignment of "Clickthrough URL" attributes via the editing panels, these are disregarded, resulting in the lightbox action. For my website, it is essential that clicking on a thumbnail directs users to the corresponding projects page instead. To address this issue, I found a script shared by another Squarespace user, nicknamed ghostcat, which is included in the header:
<script>
var currentPageBaseURL=window.location.href.split("?")[0];
Y.on("domready",function(e){
Y.io(currentPageBaseURL+"?page=1&format=json-pretty", {
on:{success: jsonLoaded}
});
function jsonLoaded(err,data){
try{
var jsonResponse = Y.JSON.parse(data.responseText);
var items=jsonResponse.items
Y.all("#thumbList .thumb, #galleryWrapper .slide").each(function(e){
var thumbId=this.getAttribute("data-slide-id");
for(var i=0;i<items.length;i++){
if(thumbId==items[i].id && items[i].clickthroughUrl){
this.setAttribute("data-clickthrough-url",items[i].clickthroughUrl).on("click",function(e){
e.preventDefault();
e.stopPropagation();
window.open(this.getAttribute("data-clickthrough-url"),'_self');
})
}
}
})
}catch(e){}
}
});
</script>
Although this script effectively fulfills the desired functionality, it has one major drawback - returning visitors to the site must clear their cache for the updated thumbnail links to work correctly. If a visitor had previously accessed the project page and new thumbnails were added since then, only the existing thumbnails will function properly, while the new ones will trigger the lightbox action.
I've attempted incorporating the code in the footer without success, as well as uploading the script as a .js file and calling it on page load. Even after editing the filename and updating the gallery, the issue persisted. Surprisingly, the script does not appear to be cached by Chrome or Safari, yet clearing the cache prior to visiting the page consistently resolves the problem.
Currently, I have implemented a redirect strategy where I append the gallery's URL with the date (e.g., www.website.com/work -> www.website.com/work-041718) and establish a 301 redirect. While this solution works, it feels cumbersome to modify the URL with the date for each gallery iteration.
Are there any modifications I can make to the script or alternative tactics I can employ to overcome this challenge?
I am open to further clarification and suggestions to address this issue.
EDIT - Upon reviewing the inspector, I noticed that an XHR file is being cached. This file contains all the image attributes set in the panel, including the Clickthrough URL, and can be found at www.website.com/gallery-page?page=1&format=json-pretty. This discovery leads me to believe that this XHR URL may be at the root of the problem, as the script functions based on the data retrieved from this source. Could this insight potentially aid in finding a solution?