mportch Posted April 23, 2020 Share Posted April 23, 2020 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:) Link to comment
mportch Posted April 24, 2020 Author Share Posted April 24, 2020 @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 comment
Julia-K Posted April 24, 2020 Share Posted April 24, 2020 @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 comment
mportch Posted April 24, 2020 Author Share Posted April 24, 2020 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 comment
kindandbrave Posted June 8, 2020 Share Posted June 8, 2020 @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 🙂 Link to comment
mportch Posted June 9, 2020 Author Share Posted June 9, 2020 @kindandbrave I abandoned the gallery a long time ago and made individual images. Annoying, but easiest way around it. Link to comment
jpeter Posted June 9, 2020 Share Posted June 9, 2020 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: IO0hy2AwLu.mp4 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> kindandbrave 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment