How can I display filenames in a Squarespace Gallery Block?

24 Apr

There are many situations when you may want to display image filenames below images in a Gallery Grid block. This is particularly useful for photographers who may create a page in Squarespace for their client to view. Here's how to do it with a page of Gallery thumbnails, using a Gallery Block.

Note that this guide uses a Squarespace Gallery Block. This hasn’t been written for Gallery Sections or Gallery Pages (v7.0).

Steps

1. Create a new page.

2. Add a Gallery Block to the page. Choose the Grid option.

3. Upload your images to the Gallery Block, or if they are already in a Gallery Page you can click on Use Existing Gallery and select the one you want. This avoids uploading them again.

4. On the Design tab, format the Gallery how you'd like it to display, i.e. the aspect ratio, the number of thumbnails per row, etc.

5. It's essential that you tick the Show Title check box. If you don't do this, you won't see the filenames!

6. Apply the settings and save the page.

7. In the Settings for this page (click the gear icon next to the page name) click the Advanced tab. In the PAGE HEADER CODE INJECTION box, paste the following code:

  
    <!-- Display filenames in a Squarespace Gallery -------------------------------------------->
<!-- Copyright Soundfocus Digital [sf.digital] --------------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
window.addEventListener('DOMContentLoaded', (event) => {
  var slides = document.querySelectorAll('.slide img');
  slides.forEach(function(slide, i) {
    var altText = slide.getAttribute('alt').replace('.jpg', '');
    var titleElement = document.querySelectorAll('.image-slide-title')[i];
    if (titleElement) {
      titleElement.innerHTML = altText;
    }
  });
});
</script>
  
  

8. Save your settings

When the page is refreshed, you'll see the filenames below them. You can change the filename formatting if you’d like.

Note that if you enter a formal title for an image (in the Gallery image properties) it will replace the filename. The code also removes .jpg extensions.

Is this the best solution? No, it’s just an example. If you want a robust solution for your Squarespace website that loads more quickly, you can book us to build one for you.

If your filenames are too long when shown on mobile, you may need to add some styling to the Custom CSS area to avoid them clipping. For example:

  
    .sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
  line-height: 1.2em;
  white-space: pre-wrap;
  overflow: visible;
}
  
  