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

[FreeShare] 7.1 Gallery Block Workaround


bangank36

Question

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

 

image.thumb.png.17b263cd9108d6b098e427c5daee9c9a.png

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

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

×
×
  • Create New...