Gallery Captions & Padding between Images?

Site URL: https://smilodon-ocelot-my5f.squarespace.com/lost-america

Thanks to users on this forum, I've added gallery captions UNDER my galley images.

However, when scaling the site, the images can cover the caption above them.

Is there code to prevent this - maybe it needs percentage padding below the captions to override Squarespace's gallery settings?

passcode: trythis

(DESKTOP VIEW:)

(SCALED DOWN TO OTHER MEDIA:)

@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.

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>