Using a gallery instead of the template banner


Another item on this Caue,

I added a gallery header to the “basis canada > our products” page and I am seeing a big space under the gallery- are you seeing this on your end? I’m not sure why it is doing this or how to correct?

Thanks ! kate


Hi Caue,

I have another request from the client on the same site (basis med)
Right now I have buttons set up for linking the viewer to certain videos. For example, here is a button under "Lumixyl" called "video: why lumixyl" on this page:

The client would like for the videos on their site to display kind of like an image would if it were a lightbox where when you click it, it comes up on the screen without directing you to an outside source, like youtube.
Is it possible to make all the videos "pop up" like this? If so, would you have to write code and what would the cost be?



Great! smiley

And that's easy. Just remove the folder and set all other pages under "not
linked". There, I'm editing it for you the lead.

Oh, many new messages! Basis Canada Our Products had an issue indeed. You have to remove the regular banner. Already done.

As for the video lightbox, I think it's simple enough: but yeah, if needs to be button-like in that way, I'll need to spend some extra time on it. U$84 more at most.


Caue, on the shop page gallery header, I need to request that you set it up as we first discussed. If you can set up a work-around to the issue and not have to do code for the gallery header, that is fine, I just need it to look the same to the client. But, as it is, I had expected a shop page header once you were done with the coding and have not yet gotten it. Could you please set the site so that appears to have a shop page gallery header and is a finished solution for the client?
Thank you and I apologize for being blunt, I just need this project to be done so we can move to next.

thanks so much


I prefer bluntness and boldness, please keep going with it!

If that's what you wanted you should have told me in the beginning.

It might have been better...

Because I'm afraid the (closest to) worst have happened. frowning

I woke up today by 7 am and I've been fiddling with this since then. Now I really need to go and I may not be able to finish this today (which was our due date).

For the first few hours I was trying to research new topics to get the best result possible there, using AJAX. It didn't work and I decided to move on before timing out.

Then I went back to my first plan and the first thing I thought about doing, which was adding the gallery block anywhere in the page (only place that's possible for a Shop Page is on the footer) and then simply moving it to the banner place. That should be simple enough. And it kind of was, but...

For whatever reason I couldn't find out, I can't make it rendering work as it should!

Right now, if you go to and manually resize the window, it will be perfect. That's what I had done hours ago, after just a few moments adding a few tricks for doing that. It's not ideal, but it works.

The problem is if you do not resize the window after it's loaded, it will stay as small as it was on the footer. And after hours trying to fix it in every possible way, I couldn't. I just couldn't. cry

It's as frustrating as it can be. Such a minor detail, and so close to the end, but what a road block! It's almost like taking the ladder to go upstairs in a tower only to get there with closed windows and no keys. And the keys are nowhere to be found, no matter where you look or how many times you go up and down seeking for them. They might, in fact, not even exist... And the windows might, in fact, be just really good paint on the wall that tricked me really well.

I will try to come up with some idea later on today, if I'm able to get back at time, or in the next days to come.

You see, programming in such complex environments sometimes require a simple idea. Other times experience can help. And I'm good with having ideas and I do have years of experience specifically with this kind of script... But today nothing of that and not even plenty of time was enough. And it might be something impossible to do, squarespace is limited like that, there are things we just can't do. I still can't believe this would be one of those...


And then... Someone did manage to help me finding the answer! Just awesome (after being almost 7 hours on this, maybe 4 just on this minor "key")!

It's there, it's done. It's not as good as the first solution but in the end it looks as simple as you probably expected.

You have to edit the left footer and whatever gallery you set there will be the banner on every page that's on the script configuration (allowedPagesForFooterBanner). So yeah, you have to manually add which pages you want to the script before it will work. And it is just 1 gallery per global setting this way, no way to customize per page, but you can still use the old method.

I hope I'm not missing anything this time. I really gotta go now! wink


Wow Caue- I feel just terrible about this- I never expected you to do all this!

ok so it seems the solution is working here:

When you have a moment, Can you send me a screen shot of where I need to place the gallery when I am in the editor?

I AM SO SORRY you had to go through all this- life of a designer, ups and downs….

Thank you I very much appreciate it


Don't be. I was writing it while the solution came up, so it all ended up fine. It is also part of learning more about squarespace and improving my services... The only problem is how it happened in the very last moment. I decided to leave the narration just because it illustrates a bit of how the process happens, I hope. smile

Things like that happen at least once per month, just not in the last minute like that. Designers (which I am not, unfortunately) probably go to much worse, since their software is even more complex and they can do so little about it.

Even two:


As you requested @Kate, I've also done the lightbox now. And had some fun while at it. It's all on:

To use it, you just have to add this URL (instead of the video URL) to the button and a Gallery right after it:


Take a look on the squarespace config how I setup that page. wink

The gallery has to be a grid, as that the only one that makes the lightbox precisely the way we wanted (I hope), as discussed before. Here's a video on how you can include one:

And this is the full code I've used:

<script author="">
    var $videoButton = $('.button-block a[href^="javascript:jqueryLightbox()"]');
    var $galleryLightbox = $videoButton.findNext('.sqs-block-gallery');
    $videoButton.attr('href', 'javascript:');
  function jqueryLightbox () {
    alert('jQuery not loaded');
  (function( $ ){
   $.fn.findNext = function(sel) {
     var $result = $(sel).first();
     if ($result.length <= 0) {
       return $result;
     $result = [];
     var thisIndex = $('*').index($(this));
     var selIndex = Number.MAX_VALUE;
       var valIndex = $('*').index($(val));
       if (thisIndex < valIndex && valIndex < selIndex) {
         selIndex = valIndex;
         $result = $(val);
     return $result;
  })( jQuery );

PS: I've also added a small bug fix to a previous code which was affecting this one. Basically it was adding couple of checking for nulls, such as if ($gal.length). smile

How to create a video play button like on "Introducing Squarespace Seven"?

HI Caue,

I need to apply this slideshow solution you did to the shop page that is currently in use on the Basis site. I remember you saying I need to insert something into the footer, I just cannot seem to follow what I need to do to the footer from the instructions below.

As a reminder, this is the shop page I am referencing:

Thank you!


The left footer has the only gallery that will work on every shop page (or blog page, or many other kinds of page that we can't use the other method).

You just have to replace that gallery. The two screenshots from the previous post show you where the left footer is located. You should be able to simply edit it.

Granted, right now I've got a bug on my chrome browser which I can't properly edit that footer in any squarespace site. But I can do it on safari, for instance. Maybe you're having a similar issue.


Thanks Caue

I appreciate your response on the footer, at this point, I am hoping you could set up whatever code needs to be in the shop page for me to be able to edit the slideshow banner, as I cannot access it on my end and the client was expecting it up! It needs to be on this shop page:

Also, On this page: The video light box is working for the “why Lumixyl" Button, but not for the “why silk peel". In the gallery, the right URL is input for the silk peel video, however, when clicked it plays the Lumixyl video. Additionally, under the sWhy silk peel button the thumbnail of the video displays where it should not

Next go-around, we will not make things so hacker like…


Well, I have uncommented the script code which was already set to make it work with '/shopproducts' page as pointed out, and it's already working. I also went ahead and removed the old static banner from shopproducts. But you still need to set up the gallery or tell me how you want it.

The issue I mentioned with chrome and footers is coincidental, not related to any custom scripts at all, related strictly to squarespace and, maybe, it's just in my end. I'm in touch with them to report the bug. I just cited it because it would be funny if you ended up having the same bug! stuck_out_tongue_winking_eye

My bad yet again on the lightbox bug. The fix was basically using a for each instead of if ($videoButton.length). That code is fairly simple, not very hackish or particularly difficult to maintain, despite its apparent big size.

But I agree with you. If we need so much more than a couple small scripts, it's probably a better idea to go with developer mode!


Awesome, video pop up working!- And perfect, you put the gallery right where it needs to be on the shop page- I am still having trouble seeing where I need to go to edit the images in the slide show- would you mind screen shooting where I need to go to add images?

Thank you!


I've made a video for you:

In fact, I resolved my chrome issue by clearing up all cookies from squarespace, right after I've made that video. And now I can see the footer buttons just like in that screenshot already provided.


Thank you for this Caue- I will give it a go- supper helpful to have the video- thank you!

what would it take to get a longer loop on my new GIF banner? Right now I can only upload a 5 second GIF to SS it seems- anything larger than that gets cut off.

Would love to know what you would think of for a solution

Thanks! Kate

Animated GIFs versus videos on background

Oh yeah, there's that limitation as well. Squarespace only takes images up to 20mb. frowning

They want to keep a fast loading and clean website so I suppose that's the biggest reason for this measure.


You think there's any way around it? Would it be worth trying javascript to tell the browser to replace these gifs with new ones every 5 seconds after preloading them, so it looks seamless to add in more?

Maybe that would be a lot of work?

Thanks! Kate

Animated GIFs versus videos on background

Too much work, yeah! That could work, but it'd be much much simpler to just use a video.


Ok I trust you! When you have a moment, could you tell me the cost to put up a video instead?

Thank you! Kate

Animated GIFs versus videos on background

Caue I just got around to working on this and watching the video- thank you so much for making it, that was so nice of you! Worked wonderfully!