How to improve the thumbnail quality on imported on the video collections library - Squarespace 7.1

The video collections are making the thumbails, however Squarespace is pulling through a low resolution image. By using the following code, you can bring through a higher resolution image, improving the output of the site.


Add the following to your Code Injection - Footer

<script>
window.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('img.grid-item-image');
  images.forEach(image => {
    const src = image.getAttribute('src');
    if (src.includes('295x166')) {
      const newSrc = src.replace('295x166', '1080');
      image.setAttribute('src', newSrc);
    }
  });
});
</script>
Dave Hawkins

As a top tier Squarespace Expert and founder of Made by Dave, I bring over 8 years of Squarespace experience and 200+ bespoke website launches. Our process combines consultancy, design, project management and development for a collaborative and efficient experience with clients like you. Whether you need a new website or updates for your existing site, we'll help you get up and running.

https://madebydave.org
Previous
Previous

How to stack the blog next/previous pagination text for mobile only - Squarespace 7.1

Next
Next

How to adjust the aspect ratio to 16:9 on video collections library - Squarespace 7.1