Gallery Block is one of the most wanted feature on Squarespace 7.1, for the last few days I thought Squarespace dev team decided to bring it back but it turns out a 'mistake' and now it gone again!
So I created this snippet to bring the feature to include the gallery into section's block using code block and gallery section.
There a few steps you need to follow
1. Create a gallery section and grab it's section id, using this extension:
example: section[data-section-id="5fad1f27e741ef42c9a8a4a3"]
Squarespace ID Finder - Chrome Web Store (google.com)
2. Create a Code Block where you wanted the gallery to show up, add this code snippet
<div class="gallery-placeholder" data-target='{gallery-section-id}'>
Gallery Block Name (optional)
</div>
whereas
- {gallery-section-id} should be replace with the section id you got above
- Gallery Block Name: this is optional, you can place it to identify which section will be replaced in the block position
3. Add these snippet into Settings->Advanced->Code Injection, note that the stylesheet can be place into Design->Custom CSS
<style>
/* Override all the gallery section style */
.gallery-placeholder * {
background: inherit;
}
.gallery-placeholder .gallery-section {
padding-top: 0 !important;
min-height: inherit !important;
}
.gallery-placeholder .gallery-section .gallery-grid,
.gallery-placeholder .gallery-section .gallery-reel {
padding: 0 !important;
}
.gallery-placeholder .section-background {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
if ( window.location !== window.parent.location ) {
// The page is in an iframe
return;
} else {
// The page is not in an iframe
var galleries = document.querySelectorAll(".gallery-placeholder");
for (var i = 0; i < galleries.length; i++) {
galleries[i].innerHTML = "";
var target = galleries[i].getAttribute("data-target");
if (document.querySelector(target)) {
galleries[i].appendChild(document.querySelector(target));
}
}
}
})
</script>
Check out the outcome here
https://beyondspace-showcase.squarespace.com/gallery-demo?password=1234&utm_source=squarespace_forum&utm_medium=topic&utm_campaign=promo
