Using a gallery instead of the template banner

[cregox]

Hey @Kate, remember this list we agreed on making item 2?

1. You want a picture or a video on top header? That should be U$ 42
2. You want a gallery on top header? U$ 210
3. You want a different gallery on top header for each page? U$ 294

Well, it so happened I had a different picture of what you wanted, and for what I now think you need it would be actually even simpler.

I was thinking on moving the gallery on top of the header, not the page banner. So, item 3 is moot and I'll probably finish early...

https://kate-bosse-87i3.squarespace.com/home-copied

Please do verify this is almost what you want and bring on what else you need to change there. I would only make its height automatically big enough so we can see the video controls (which already happens on screen width 640px).

I also still need to fix a few glitches I've noticed there... But it's almost ready already, as you hopefully could see there!

[Kate]

Hi Caue!
So glad to hear it was simpler than we initially thought. The height should just match the height the images are now in the banner. So I can add this slideshow to the top of any page by adding the gallery where you have it now on the copied home page? Will the videos play automatically as well?

Thanks so much and please let me know when the glitches are resolved and I will show to client.

Thank you!
Kate

[cregox]

Finished!

Making the video autoplay might be very tricky and it would be a bad idea unless you're thinking on some very soft video like a background one, without sound... Let me know if you insist on this and I'll see if I can include it without further costs.

And yeah, it was simpler to make item 3, i meant, which means you'll get it "as free bonus" from the initial quote.

I'm finishing early due to other reasons, and I agree it made a bit of a confusing I've added that info on the same line!

The total cost will be indeed U$ 210 (which is more than I hoped).

On a bright side, I'll be updating my cost table one last time very soon, and this is still on the cheap!

Okay, so this is the code I've added to global code injection:

<script description="bannerize depending on the template layout">
  var $gal;
  $(document).ready(function(){
    $gal = $('span#bannerify').parents('div.row.sqs-row').find('div.sqs-gallery-container').first();
    $('span#bannerify').remove();
    $gal.parents('section#content').prepend($gal);
    $gal.addClass('bannerified');
    adjustTopGal();
  });
  $(window).on('resize', function(){
    adjustTopGal();
  });
  function adjustTopGal () {
    var topRef = 0;
    if (window.innerWidth > 640) {
      topRef = $('header#header').height();
    }
    $gal.css({'top': topRef});
  }
</script>

It will only work because there's already a jQuery added on the header from a previous job.

And all you need to "bannerize" a gallery block is adding this code block right before any gallery block:

<span id="bannerify">description: make next gallery block into a banner</span>

It will work on any page (and responsive for any size). And you can of course delete the "home-copied" whenever you want.

(Later on, for fun, I'll try to see and fix why it isn't working properly when we're logged in squarespace. But that's a minor very common issue with many scripts.)

[Kate]

Thanks Caue, but the ‘home copied is no longer showing up as having the slideshow on my side…I water to use tho spate for reference to see where exactly I needed to put in the gallery. The main page they want the gallery on is the Shop page- can you tell me how to make the shop header into a gallery?

Thanks! Kate

[cregox]

It was working, just not when logged in.

Many scripts will not work when we're logged in to squarespace because they will conflict with something in squarespace's awesome backend.

In this case it was a matter of a simple fix. I basically changed document ready for:

  $(window).load(function(){

I also tried to make it work for other gallery blocks beyond slideshow, but that's no good for today (I gtg for the day now).

Adding to the shop page is trickier indeed (dam, I overlooked that!), you can't do it as it is now. Because that page doesn't allow adding any kind of block. What you could do, however, is using a regular Page and adding a Summarize Block to it. I've added such example there, take a look if it's good enough!

Because else I'm going to either have to get a great idea or put in some extra work (in my account, of course)...

[Kate]

Thanks Caue,

I see you’ve added in a video on the test page you made, when I go into that test page and open up the gallery you set up to edit, I cannot see the media you have uploaded….If I want to add a video to a slideshow, do I just add it like a photo?

I will have to get back to you on the product page summary block option, I’m not sure if that will work or not yet

[cregox]

Squarespace doesn’t support uploaded video. When embedding a video using a URL, only YouTube, Vimeo, Animoto, and Wistia are supported. You can use embed code for other video hosting services.

There are many reasons for that, but basically it boils down to: hosting video to work well world wide in any device is no piece of cake.

As for adding video on gallery, see Option 3 on the help.

[Kate]

Ohhhh I see now- thanks Caue!

[Kate]

Hi Caue,

I don't see my response about the Shop page on this thread, so I am posting- I apologize if this is a repeat. The option of using a summary block for the shop page and making a new page so that the gallery will work at the top will not work since I have tags set up and the page will not look the same as the shop page now.

Thank you!
Kate

[cregox]

The email in feature here in these forums have many good points but some limitations. It will filter out quotes from emails in an attempt to reduce the noise. Try clicking the mail icon on your post above and you'll see how much it was filtered there. Maybe that was the issue you've experienced there. I've got no sign of your response anywhere, though.

As for the shop, actually, I just managed to solve that issue in a very simple way, which brings many better points and just 1 worse point (I can see) upon what we can do with the Shop Page. I've made a new page for each category (actually I've made just 2 so you can see it working). Then add all them to a folder.

The only problem is it's not as automated to manage categories, as you'd need to manually create each page as you create new categories for instance.

As the advantages:

• This way, the shop page is much more customizable, as you can add any block as like in any page.
• The categories can be listed on the menu
• You can easily add different gallery banners for each category (if I do it for page, it will be just 1 gallery per category, unless I work on making it more hackish)
• It requires less custom code to work with the "gallery banner" I've just created (means less maintenance of that code for both of us)
• (advantage only for me) it won't require me to create more code right now

That last point, in fact, is a bit subjective, but my point there is I want you to be happy with my work. Since we're working in an agile manner, we haven't really agreed exactly how the banner should show up on the shop and I (now) think this is a perfectly fine manner (except for the only disadvantage point there).

What I mean is, if that bad point is no big issue for you (it wouldn't be for me if I didn't need to keep changing categories) it will be better for both of us to use Regular Page instead of Products Page. If it is a big issue for you, then I will get back to it and make it work there.

But there is a chance it will take much more time for me to do it and if it does I think it will be fair to charge a bit more.

If it doesn't take that much more extra, it's only fair for me to do it within the planned cost, because I did overlook that issue.

Another thing I might consider doing instead would be coding for changing categories of the Summary Block within the same Page. If it's possible and if it takes less code than the other option.

[Kate]

Hi Caue, I guess I can make this work, however, the client doest want the drop down categories under “shop” they just want to click on shop and enter the shop, so if you could make it so there are no drop down choices in the menu bar, then I think I could make this solution work.

thanks, Kate

[Kate]

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

[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: https://kate-bosse-87i3.squarespace.com/our-products-1/

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?

Thanks!
Kate

[cregox]

Great!

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: http://answers.squarespace.com/questions/4182/how-can-i-lightbox-an-embedded-video-full-screen-without-coding 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.

[Kate]

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
Kate

[cregox]

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.

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 https://kate-bosse-87i3.squarespace.com/shop-footer 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.

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!

[Kate]

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: https://kate-bosse-87i3.squarespace.com/shop-footer

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
Kate

[cregox]

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.

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.

a screen shot of where I need to place the gallery when I am in the editor

Even two:

[cregox]

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

https://kate-bosse-87i3.squarespace.com/video-button

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

javascript:jqueryLightbox();

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

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="cregox.com">
  $(window).load(function(){
    var $videoButton = $('.button-block a[href^="javascript:jqueryLightbox()"]');
    var $galleryLightbox = $videoButton.findNext('.sqs-block-gallery');
    $galleryLightbox.hide();
    $videoButton.click(function(){
      $galleryLightbox.find('img').click();
    });
    $videoButton.attr('href', 'javascript:');
    $videoButton.addClass('lightboxed');
  });
  
  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;
     $(sel).each(function(i,val){
       var valIndex = $('*').index($(val));
       if (thisIndex < valIndex && valIndex < selIndex) {
         selIndex = valIndex;
         $result = $(val);
       }
     });
     return $result;
   }; 
  })( jQuery );
</script>

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).

[Kate]

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: https://kate-bosse-87i3.squarespace.com/shopproducts/

Thank you!
Kate