[FreeShare] 7.1 Gallery Block Workaround

Quote

🐲 Feb 2024 Update:

For those who are interested in Gallery blocks on 7.1 Sections, I have updated this solution to allow adding Gallery block back, check Classic Gallery block

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

This is awesome and works perfectly. Thank you so much! 

The only issue I am having is that it only seems to work if the gallery section that I am turing into a block is on the same page. I am hoping to create some "master" gallery sections that I can include in multiple pages on my site and that seems to break the code. Any suggestions? 

3 hours ago, gotkate86 said:

This is awesome and works perfectly. Thank you so much! 

 

The only issue I am having is that it only seems to work if the gallery section that I am turing into a block is on the same page. I am hoping to create some "master" gallery sections that I can include in multiple pages on my site and that seems to break the code. Any suggestions? 

This is a simple snippet so it not suppose to support ajax call for external gallery, pm me of you still interested to see how we can help

Hello, I seem to be at a loss here.  I downloaded your extension, and I'm ready to start but your instructions say to "create a gallery section".  How do I create a gallery section if gallery sections aren't available?   Thanks for your help with this.

9 minutes ago, darrylv said:

Hello, I seem to be at a loss here.  I downloaded your extension, and I'm ready to start but your instructions say to "create a gallery section".  How do I create a gallery section if gallery sections aren't available?   Thanks for your help with this.

The instruction is for template 7.1 where gallery block is removed on normal pages, only gallery section available, these are different kind of concept...

Good morning,

I am trying to use this walkaround but it seems it is not working anymore. Also, if I go to the demo-page there are no gallery blocks, only sections...

Any tips?

thank you

3 hours ago, VPSS said:

Good morning,

I am trying to use this walkaround but it seems it is not working anymore. Also, if I go to the demo-page there are no gallery blocks, only sections...

Any tips?

thank you

Gallery block is not available on squarespace 7.1. My solution I gave is a trick to move the gallery section into the code block

hello, thank you for your reply.

I understand what you are saying.

I have v7.1 and what I am trying to do is move the gallery section into the code block as you are saying. But I am not able to do that at the moment.

I created the code block, I pasted the code and identified the section ID.

then I moved to the code injection and pasted the whole code of your step (3) in the header section.

Do I need to do anything else? 

Regards.

14 minutes ago, VPSS said:

hello, thank you for your reply.

I understand what you are saying.

I have v7.1 and what I am trying to do is move the gallery section into the code block as you are saying. But I am not able to do that at the moment.

I created the code block, I pasted the code and identified the section ID.

then I moved to the code injection and pasted the whole code of your step (3) in the header section.

Do I need to do anything else? 

 

Regards.

Kindly share your site with site-wide password so I can take a look

Hello,

thank you very much.

here is the link: Spinta Studio | Design & Naval Architecture (squarespace.com)

6 hours ago, VPSS said:

Hello,

 

thank you very much.

here is the link: Spinta Studio | Design & Naval Architecture (squarespace.com)

Your site is private now. Kindly set it a protected password

hello,

sorry, my bad.

It is protected by password now.

PW is: Palma2022!

1 hour ago, VPSS said:

hello,

sorry, my bad.

It is protected by password now.

PW is: Palma2022!

Hi,

I found that the gallery placeholder contains the gallery section at the moment.

It looks like you 've figured it out, doesn't it?

I think it is working now but I am not able to control the dimension of the picture frame. They look really small now. In my plan the images would be as large as the horizontal line of each column. Also, it looks like above and below there is too much padding.

Is there a way to control that?

2 hours ago, VPSS said:

I think it is working now but I am not able to control the dimension of the picture frame. They look really small now. In my plan the images would be as large as the horizontal line of each column. Also, it looks like above and below there is too much padding.

Is there a way to control that?

Have you added any other code? It seems different from my above image

Hi, I simply get it to work using your instruction in the firs post.

Now I have 3 columns as I wish but the images are too small and I am trying to figure out where I can manage the dimension.

Any tips?

1 hour ago, VPSS said:

Hi, I simply get it to work using your instruction in the firs post.

Now I have 3 columns as I wish but the images are too small and I am trying to figure out where I can manage the dimension.

Any tips?

Try adding to Home > Design > Custom Css

section[data-section-id="622773444d19710507f4d5a9"] .gallery-placeholder .gallery-slideshow {
  padding: 0;
}
section[data-section-id="622773444d19710507f4d5a9"]  .gallery-placeholder  .content {
  width: 100% !important; 
}

Let me know how it goes

hi,

that's great. it is working.

if you also give me a hint to put the dots to scroll through the images in place of the arrows would be great! or, if easier, how to get rid of the grey opaque background of the arrows...

thank you a lot!

Almost a year since the last post but giving it a shot anyway: I've taken the above steps as well as I can (coding skills near-non-existent but I know the basics) and all I get is the code block displaying the code I've entered. Even used the Chrome ID-finder to ensure I got the right section ID. I can enter the second, longer snippet into the code injection settings but if put it in CSS I get a syntax error on line 1, if that matters?

I'm very much a newbie to this and don't even understand why they've removed a seemingly completely serviceable gallery block function - which I can't find when trying to make a classic editor section either.

I tried to follow the instructions, but I can't get it to work..

I pasted the code from step 3 into Advanced>code injection->header

On my portfolio page, where I need my Gallery block, I created a code block (HTML) in the first section and pasted the code from step 2 into it. I also replaced the {gallery-section-id} including swirly brackets with the section-id from my gallery section below.

the colors are different from the example, only placeholder and the id match (red)

Still, the block won't display my gallery-is there something I am missing?

This is my code block where I entered the section ID from the gallery section below...

4 hours ago, 2box said:

I tried to follow the instructions, but I can't get it to work..

I pasted the code from step 3 into Advanced>code injection->header

On my portfolio page, where I need my Gallery block, I created a code block (HTML) in the first section and pasted the code from step 2 into it. I also replaced the {gallery-section-id} including swirly brackets with the section-id from my gallery section below.

the colors are different from the example, only placeholder and the id match (red)

 

Still, the block won't display my gallery-is there something I am missing?

 

This is my code block where I entered the section ID from the gallery section below...

 

Can you share your URL so I can take a look?

caper-sunflower-95tm.squarespace.com

PW: 124

I put the code block in the 4th portfolio project, "Haus am Kattegat"

were you able to find what I've done wrong?

I am a bit confused here. I can add a normal gallery block to a portfolio project page section as well as a standard page section. I have complete control over the block, columns, layout all the normal things. It works with both Fluid Engine and with the Circle Labs opt-out of FE option enabled. I think that some 7.1 users may not have the gallery block option, I was sent a screenshot of a block menu and it did not appear. I have not been able to discover any part of 7.1 where you should be able to add a gallery block and the option is not there.  Is it possible that when the block was added to 7.1 some time ago that not all 7.1 sites were updated?

4 minutes ago, derricksrandomviews said:

I am a bit confused here. I can add a normal gallery block to a portfolio project page section as well as a standard page section. I have complete control over the block, columns, layout all the normal things. It works with both Fluid Engine and with the Circle Labs opt-out of FE option enabled. I think that some 7.1 users may not have the gallery block option, I was sent a screenshot of a block menu and it did not appear. I have not been able to discover any part of 7.1 where you should be able to add a gallery block and the option is not there.  Is it possible that when the block was added to 7.1 some time ago that not all 7.1 sites were updated?

I believe adding Gallery blocks to any section in 7.1 is exclusive to circle members