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.

An option like in Marquee: 1/3 page, 1/2 page, full page would be ideal.

I would really like to know how to change the height of slideshows on Bedford as well. Already suggested to them in a ticket to add that on in the style editor. Hopefully they will. Otherwise if someone could supply a code that would be very much appreciated.

Is there a way to have this code work only on the desktop and not mobile devices? Or even better, is there a way to implement this code but have mobile still scale to width? On mobile it crops a lot from the header images instead of scaling them to the width.

I wanted to shrink the size of the banner; adding this to custom CSS worked fine:

.transparent-header.view-list .banner-thumbnail-wrapper, 
.transparent-header.collection-type-page .banner-thumbnail-wrapper {
   padding: 100px 0px;
}

The 100px is the padding above and below your site description. The 0px is the padding to the left and the right.

I'd also like to know how to do this. Trying to make the banner fill the size of the page before scrolling down.

This is great but still limits the height of the banner image to one px height. I would love it if this could be manipulated to make image heigh dynamic so it could snap to the full screen size no matter the resolution.

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.

It didn't work for me but I'm using the slideshow gallery feature. I need to shorten the banner since you cannot see that there is text below on a 13" laptop or tablet.

I found out how to fix the Firefox issue. I added this to my CSS and it works great in all browsers now:

.collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery {
 height: 100% !important;
}

hey ericjensen1628,

That only works with a transparent header. If you use this code in the CSS instead it will work for both a transparent and visible header:

.sqs-gallery.sqs-gallery-design-stacked { min-height: 100% !important; }

HI anyone out there. I really want to reduce the banner height in bedford to just a strip, say half the minimum size allowed by the template. Totally bunny at coding. Can anyone help with some code and instruction how to make this work. thanks Geoff

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

So I tried the updated code from @kofifus and it did the key move of moving the banner slideshow all the way up to the top of the page. See before (realize there's a typo here);

And after:

However, like other users have had issues with, I can't seem to get rid of the extra space being provided for the full banner image. Would love to get that black bar of padding knocked out and make the text re-center on the thinner banner image. Any ideas? Thanks!

I managed to change the height of the banner by manipulating the image height in an photo editor before uploading it as a thumbnail.

Still can't figure out how to change the height of a slideshow banner though.

Best of luck guys!

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

I managed to make the banner larger by adding empty lines/spaces in theDescription under Configure Page.

Use this code in the Custom CSS Editor to control the height of the banner area in Bedford template:

#collection-52f0815fe4b01bd82c2683f1 .desc-wrapper {
 height:150px!important;
}

Substitute my ID number for your collection ID number of course.

Good luck and let me know if this works for you!

@foleyatwork and @eanderson - Thank you both very much. This is excellent! Much appreciated.

@foleyatwork and @eanderson thank you! Both of you are amazing and I greatly appreciate the work you've put in to answer our questions.

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 - When making the adjustment to enable this only for the homepage, the blog master page loses its header entirely? The individual blog posts are fine but on the blog page, the header completely disappears. Thoughts?

You got a link where this is occurring?

@foleyatwork - Unfortunately I'm working in preview mode, though I think I figured out the issue. I was removing "/body.homepage/" entirely and not just the actual comments. I read your notes as if I should remove the comment and it's contents entirely. Oops! Thanks for the quick follow up!

@foleyatwork - It appears the blog post titles that are part of the scroll don't adjust the height of the header when on a smaller resolution screen. Below is a screenshot, on the right is my larger monitor at a larger resolution and on the left is my laptop. Thoughts?

http://s28.postimg.org/3ry3rr7ql/screenshot.jpg