mportch 17 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 post
1 jpeter 42 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 post
0 mportch 17 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 post
0 Julia-K 6 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 post
0 mportch 17 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 post
0 kindandbrave 94 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 post
0 mportch 17 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 post
Question
mportch 17
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 post
Top Posters For This Question
4
1
1
1
Popular Days
Apr 24
3
Jun 9
2
Apr 23
1
Jun 8
1
Top Posters For This Question
mportch 4 posts
Julia-K 1 post
kindandbrave 1 post
jpeter 1 post
Popular Days
Apr 24 2020
3 posts
Jun 9 2020
2 posts
Apr 23 2020
1 post
Jun 8 2020
1 post
Popular Posts
jpeter
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
Create an account or sign in to comment
You need to be a member in order to leave a comment