Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Gallery Captions & Padding between Images?


mportch

Question

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:)

 

1073900360_ScreenShot2020-04-23at11_11_44am.thumb.png.871f2f00e2fb1d72f4d1fa6050f8c4b9.png

 

 

 

(SCALED DOWN TO OTHER MEDIA:)

255063878_ScreenShot2020-04-22at6_26_52PM.png.cbd49ae3c24aab3c8a05b4d02a54d0f7.png.ccbfb89695890a4c5057de0124df6e8a.png

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 be

Posted Images

6 answers to this question

Recommended Posts

  • 1

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>

 

Link to post
  • 0

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

Link to post
  • 0
 
@media screen and (max-width: 767px){
	.gallery-grid--layout-grid .gallery-grid-wrapper {
		grid-row-gap: 3vw !important;
	}
}
Add this at the very bottom of the custom CSS.
Link to post
  • 0

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.

 

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...