Clickable Thumbnails on a Simple List Section

By default, Squarespace doesn't allow images within List Sections to be clickable. This feels like it should be an option, but since it’s more complex for Carousel & Banner layouts, I think Squarespace opted for consistency.

Anyhoo, the JavaScript below resolves this by grabbing the link from the list section button and using that to create a link around the thumbnail.

You’ll need the button turned on for each list item, but I’ve added some optional CSS below if you’d like to hide it visually.

Add this to your Site Footer Code Injection area:

<!-- Clickable Thumbnails for Simple List Sections from Will-Myers.com -->
<script>
window.addEventListener("load", function () {
  // Find all simple list items
  const simpleListItems = document.querySelectorAll('.user-items-list-simple li.list-item');

  if (!simpleListItems.length) return;

  // Process each list item
  simpleListItems.forEach(listItem => {
    // Try to find the href from title or button
    const titleLink = listItem.querySelector(".list-item-content__title a");
    const buttonLink = listItem.querySelector(".list-item-content__button-wrapper a");

    // Get the href from whichever link exists
    const href = titleLink ? titleLink.getAttribute("href") :
                buttonLink ? buttonLink.getAttribute("href") : null;

    if (href) {
      // Find the media inner element
      const mediaInner = listItem.querySelector('.list-item-media-inner');

      if (mediaInner) {
        // Create a new link element
        const newLink = document.createElement('a');
        newLink.setAttribute('href', href);

        // Wrap the media inner with the new link
        mediaInner.parentNode.insertBefore(newLink, mediaInner);
        newLink.appendChild(mediaInner);
      }
    }
  });
});
</script>

Javascript

Copy

Site Footer Code Injection area

(Optional) Hide buttons in Simple List Section

/**
* Hide Buttons in
* Simple List Section
* from Will-Myers.com
**/
.user-items-list-simple{
  .list-item-content__button-wrapper{
    display: none;
  }
}

CSS

Copy

Custom CSS area