Gallery Captions & Padding between Images?

You can try adding the JavaScript code below which adjusts the height of the image containers to account for the caption height. Here's a video that shows a before and after when executing the code below:

JavaScript

(function (document) {
  var timeout;

  if (document.readyState === 'loading') {
    window.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    addNodeListForEachPolyfill();

    setTimeout(function () {
      handleMasonryItemsCaptions();
      triggerResizeEvent();
    }, 100);

    window.addEventListener('resize', function () {
      // If there's a timer, cancel it
      if (timeout) window.cancelAnimationFrame(timeout);

      // Setup the new requestAnimationFrame()
      timeout = window.requestAnimationFrame(handleMasonryItemsCaptions);
    });
  }

  function handleMasonryItemsCaptions() {
    var galleries = document.querySelectorAll('.gallery-masonry');

    if (!galleries) return;

    if (isDesktop()) {
      document.querySelectorAll('.gallery-masonry-item').forEach(function (item) {
        item.style.height = '';
      });
      return;
    }

    galleries.forEach(function (gallery) {

      var items = gallery.querySelectorAll('.gallery-masonry-item');

      items.forEach(function (item) {
        var height = 0;
        var wrapper = item.querySelector('.gallery-masonry-item-wrapper');
        var caption = item.querySelector('.gallery-caption');

        if (wrapper) {
          height += wrapper.offsetHeight;
        }

        if (caption) {
          caption.style.paddingBottom = 0 + 'px';
          height += caption.offsetHeight;
        }

        item.style.height = height + 'px';
      });
    });
  }

  function triggerResizeEvent() {
    var event;
    if (typeof (Event) === 'function') {
      event = new Event('resize');
    } else { /*IE*/
      event = document.createEvent('Event');
      event.initEvent('resize', true, true);
    }
    window.dispatchEvent(event);
  }

  function isDesktop() {
    return window.matchMedia('(min-width: 1024px)').matches;
  }

  function addNodeListForEachPolyfill() {
    if (window.NodeList && !NodeList.prototype.forEach) {
      NodeList.prototype.forEach = Array.prototype.forEach;
    }
  }

})(document);

Be sure the code above is between <script> tags, example:

<script>
  // Add JS code here
</script>

@tuanphan

I think it's best to use individual images instead of a gallery to get around this. It's a pain, but it's the only guarantee the captions work across all media sizes when it's scaled.

@media screen and (max-width: 767px){
	.gallery-grid--layout-grid .gallery-grid-wrapper {
		grid-row-gap: 3vw !important;
	}
}

Hi,

It doesn't work. Thanks anyway though!

I've rebuilt one page already with seperate images instead of a Gallery. It's a pain and I can't understand why Squarespace don't provide captions to galleries in 7.1.

@Julia-K I feel like you're on to something! But it didn't work on my page either: https://www.kindandbrave.co/gallery-1

If you come across a solution I would very much appreciate 🙂

@kindandbrave

I abandoned the gallery a long time ago and made individual images. Annoying, but easiest way around it.