Bedford: Changing the banner height?

This javascript snippet should make all the hero images and galleries in Bedford take up the full window height.

Just drop this in the footer code injection. Can't stress that footer part enough, there will be JavaScript errors if you put this in the header.

<script>
(function () {

   /*
       To make this work on the homepage only,
       set this variable to true. Then uncomment
       the .homepage selector in the CSS below.
   */
   var homepageOnly = false;

   if (homepageOnly === true && !Y.one('body.homepage')) {
     return;
   } else {
       var elem = Y.one('.banner-thumbnail-wrapper');
       var windowHeight = window.innerHeight;
       if (elem && elem.getComputedStyle('display') != 'none') {
           var content = Y.one('.desc-wrapper') || Y.one('.blog-item-wrapper');
           var padding = (windowHeight - content.get('clientHeight')) / 2;
           elem.setStyles({
               'paddingTop' : padding,
               'paddingBottom' : padding
           });
       } else {
           var wrapper = Y.one('#promotedGalleryWrapper .sqs-gallery-container');
           var gallery = Y.one('.sqs-featured-posts-gallery') || Y.one('#promotedGalleryWrapper .sqs-gallery');
           if (gallery) {
               gallery.setAttribute('style', 'height:' + windowHeight + 'px !important');
           }
           if (wrapper) {
               wrapper.setAttribute('style', 'height:' + windowHeight + 'px !important');
           }
       }
   }
})();
</script>
<style>
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper,
/*body.homepage*/ .sqs-featured-posts-gallery .slides-controls,
/*body.homepage*/ .sqs-featured-posts-gallery .slides,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post {
   height: 100% !important;
}
</style>

Update: Added some CSS to make the featured blog galleries work.

Update 2: Added an option to make this work on the homepage only.

@foleyatwork not sure why but no change when i enter this into my bedford template. help please!

I've used this script on my site (see below)

It works on load: http://www.barrello.com/

But hasn't applied to any sub-pages including when using the /home extension!

Any ideas?

<script>
(function () {

   /*
       To make this work on the homepage only,
       set this variable to true. Then uncomment
       the .homepage selector in the CSS below.
   */
   var homepageOnly = false;

   if (homepageOnly === true && !Y.one('body.homepage')) {
     return;
   } else {
       var elem = Y.one('.banner-thumbnail-wrapper');
       var windowHeight = window.innerHeight*0.5;
       if (elem && elem.getComputedStyle('display') != 'none') {
           var content = Y.one('.desc-wrapper') || Y.one('.blog-item-wrapper');
           var padding = (windowHeight - content.get('clientHeight')) / 2;
           elem.setStyles({
               'paddingTop' : padding,
               'paddingBottom' : padding
           });
       } else {
           var wrapper = Y.one('#promotedGalleryWrapper .sqs-gallery-container');
           var gallery = Y.one('.sqs-featured-posts-gallery') || Y.one('#promotedGalleryWrapper .sqs-gallery');
           if (gallery) {
               gallery.setAttribute('style', 'height:' + windowHeight + 'px !important');
           }
           if (wrapper) {
               wrapper.setAttribute('style', 'height:' + windowHeight + 'px !important');
           }
       }
   }
})();
</script>
<style>
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper,
/*body.homepage*/ .sqs-featured-posts-gallery .slides-controls,
/*body.homepage*/ .sqs-featured-posts-gallery .slides,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts,
/*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post {
   height: 10% !important;
}
</style>

not working for me for some reason, i've used css to make my banner a video and i'd like it to take up 100% of the page but it isnt!

Ok, I just can't get the image to be thinner, like yours, it's still taking up the whole screen. Which value do I adjust and/or what are the dimensions of your image as you uploaded it? Thank you!!!

P.S. Here's my site: https://kelsey-southerland-1fas.squarespace.com/ You can see the difference between mine and yours

Here's the site I mentioned earlier where it's working on everything i've tried except Firefox. I used the script above but changed it to 50% of the window height, not 100%. On Firefox, the images themselves aren't scaling, though some aspects of the container are. (Note that the content is now tucked up underneath the image.) Contrast that to Chrome, where it works as I expected. Ideas?

http://quickspacenevada.squarespace.com

(Still Trial, so Visitor Access...)

Thank you!

Ok, I just can't get the image to be thinner, like yours, it's still taking up the whole screen. Which value do I adjust and/or what are the dimensions of your image as you uploaded it? Thank you!!!

P.S. Here's my site: https://kelsey-southerland-1fas.squarespace.com/You can see the difference between mine and yours

If you shorten the banner, the banner layout (title text, button, tagline) shifts.

What code/ step is required to re-center the Title Text, tagline and button against the shorter (less tall) banner?

Thanks for any clarification.

—M

@foleyatwork - This javascript snippet is great and works beautifully, thank you for sharing!

I am looking to have this work on Event posts as well and simply do not know javascript well enough to know what I need to add.

Thank you in advance for your assistance.

Correction: this is actually the case for any page that has a banner thumbnail image but does not have a description or title wrapper.

@SH CD

How did you make the slider indicators and descriptions on top of the slider?!

Sorry, you used a different template. Problem solved :)

Hi there,

I am looking for a way to make a banner slideshow full screen as well...All this options don't seem to work for me...Could someone help me please? It's driving me crazy!

Thanks!

Lize

Not got a real answer for you Simon but I can confirm the code works for my site in Firefox (tested on multiple machines). The only thing I did different was create a fullscreen.js file using the dev platform instead of using the footer code injection area on the consumer platform. Have a look at www.valorizzazioniculturali.com and see if it works for you.

Hello

When I adjust the banner height percentage from @foleyatwork's script (shown in the snippet below), it does nothing. Even if I set it to 20%, it doesn't change anything.

Any help would be greatly appreciated. Thanks!

/body.homepage/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post { height: 100% !important;

The script above is for full height. Now, I'm sure this is the totally wrong way to do this and there is no doubt a much better way, but if you change this line:

var windowHeight = window.innerHeight;

to say:

var windowHeight = window.innerHeight * 0.5;

the banner should be 50% of fullscreen.

If you want the banner to be fullscreen, add a gallery as the first block you can on the page (this is for Bedford) and it'll automatically be used as the banner slideshow.

Here's one I was using for a promoted Gallery Block, to keep the controls in the right place as well:

.sqs-gallery-design-stacked-slide {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 400px !important;}

sqs-gallery-controls .previous, .sqs-gallery-controls .next { position: absolute; top: 200px; outline: medium none; color: #FFF !important; z-index: 999; font-size: 14px; line-height: 40px; margin-top: -30px; background-color: rgba(0, 0, 0, 0.12); display: inline-block; padding: 10px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;}..collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow, .collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow { width: 100%; height: 400px !important; max-width: 100%; margin: 0px; padding: 0px; opacity: 1;}

PERFECT!

Thanks

Anyone got a solution on how I can make the image full screen?

I've run into the same issue - title text, tagline and button were getting cut off. This code worked for me - it kept the text vertically centered within the banner.

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper { min-height: 0; padding: 30px 0;}

Replace 30px with the value that works best for you.

@foleyatwork Great Solution! I am working on a new site and using your snippet. It does not work on initial page load. If you click on a link, and back to the home, then it works. any ideas?

http://www.amazing.org.uk

Hihttps://sharon-wilson-t2gb.squarespace.com/config#/pages|/ecu-remapping/ I am working on this project and want the blue banner at the top of all pages to be approx 5cm high or thereabouts. I have limited knowledge of coding but am able enough to copy and paste in to the CSS if anyone out there has the correct code please. Many thanks in advance. SJ

anyone else having problems with this script in Firefox?

Hey mrg1234,

I'm trying to do exactly what you describe, but I keep getting syntax errors. Could you be more specific in terms of which code to replace. Thanks a bunch. Yosarian.

Hi - sorry to jump in here with an idiot question. I'm a complete beginner and far too scared to even contemplate CSS, but have same prob as described above - I want a full size (i.e. same size as my main header image) slide show gallery where my banner is on my home page.I tried the Five template but was advised, if I didn't want to try CSS, to use Bedford as it had a built in banner slideshow. However, the Bedford slideshow is just a small gallery on the page which is not what I want.Is there any way to get what I want without being remotely expert or shall I just give up? Thanks in advance.