Header image

Hi all,

I'm trying to set up my site layout similar to this website .

I like the way the header image and the site message dominate the first impression of a visitor. On scrolling down, the main NavBar stays fixed to the top of the page.

Alas, I'm stuck on square 1, so to speak : the Beans header image display.

The Beans Theme Customizer recommends the size of 2000 x 500 px for the header image. I wonder why is that particular size recommended, when - from what I can see, most of the header image doesn't show. I haven't tried looking at it on a very large screen, though. Maybe that's the reason ?

Cheers,

YunaM.

Ha !

I just figured that @media (min-width: 768px) for uk-block gives it the padding-top and padding-bottom of 50px. Making that bigger reveals more of the header image ... So, I guess I just have to change the less variables for uk-block, or just change the padding in the css.

Humph.

Ok, that's the first step. I was really baffled by this. Didn't expect the padding to be the factor.

However, I could still use some help in setting up the layout as on the link I provided. 🙂 .

Cheers,

YunaM

That site header only really works as an entry page though, so either as "home" or "front-page" - it does make a good impression, but its the functionality it provides which does the real trick 🙂

Fortunately, beans is quite capable of that. Don't ask me how, haven't that figured out yet - would love to see your markup - but there's a lot to find with the search function here. There's page templates, for example.

As for using an image in the header, there's this: beans_header_image. Having a look at Themebutler's excellent Totem theme on github also might help? It does make use of css/inline image for header.

Hi, it's me again 🙂

I found a way to make it work. It may not be the most efficent way, but it does what I wanted.

So, if anyone may be interested, this is what I did .

First, I removed the beans_site_branding and beans_primary_menu from the header . Then I moved them after the header and added a new div, with markup id ymnav01 and a class, so that I can style it easier.

Then I used the new div's markup id ymnav01 to bring in the 'sticky' UIkit component, which I also made only show on scroll upward, with showup:true.

So, the code - in child-theme's functions.php:

// Removing the site branding and the primary menu from the header
beans_remove_action( 'beans_site_branding' );
beans_remove_action( 'beans_primary_menu' );

// Placing the site branding and the primary menu - under the header
//  and creating a new div 'ymnav01'
add_action( 'beans_header_after_markup', 'ymnav_under_header' );

function ymnav_under_header() {

  echo beans_open_markup( 'ymnav01', 'div', array( 'class' => 'ymnav01-style' ) );

    ?>
    <div class="uk-container uk-container-center">
      <?php echo beans_site_branding(); ?>
      <?php echo beans_primary_menu(); ?>
   </div>
    <?php

 echo beans_close_markup( 'ymnav01', 'div' );
}

// Attaching 'sticky' UIkit component to the new div.
// The sticky component was added to the functions.php separately , not shown here
add_action( 'wp', 'custom_modify_child_theme');

function custom_modify_child_theme() {

    beans_add_attribute( 'ymnav01', 'data-uk-sticky', 'showup:true' );

}

and in the style.less, I gave the header some more top and bottom padding, to see the central part of my header image better, and I just gave the background color to the new div. I made it yellow, so it stands out 🙂

In style.less :

.tm-header {
 padding-top: 80px;
  padding-bottom: 50px;
}

@media screen and (min-width: 768px ) {
 .tm-header {
    padding-top: 150px;
   padding-bottom: 100px;
  }
}

.ymnav01-style {
  background-color: yellow;
}

I still have a question, though. My yellow navbar now shows up on scrolling up only, but in a very abrupt manner. I know that UIkit has an animation feature to make it appear more smoothly. But I haven't yet figured out what is the best way to include it.

Any wise comment would be greatly appreciated. 🙂

Cheers,

YunaM

Just thinking. Since it is possible to control a bunch of things beans can do with post_image, it may be possible to make it conditional? If the page is that front-page, keep size.

// crop featured image for screen > 480px
add_filter( 'beans_edit_post_image_args', 'example_post_image_edit_args' );

function example_post_image_edit_args( $args ) {

    return array_merge( $args, array(
        'resize' => array( 1600, 576, true ),
    ) );

}

You could also let wp handle it on that page natively.

Hey J.C. ,

Thank you for your feedback.

I'll try applying your code, probably with a conditional tag, so it only affects certain pages, like the front page, or the single post page.

By the way, what I was trying to accomplish here - I was dealing only with the header image and the navbar - I wasn't trying to change the display of the post_image. ( that's the 'featured image', right ? ). That's a different animal altogether 🙂 .

I'm not sure if you were asking a question, or just adding to the discussion, but generally, If I'd want to include some code, to affect only the front page in Beans, I'd probably do something like this :

add_action( 'wp', 'ymfront' );

function ymfront() {

 if ( is_front_page() ) { 
   // Add your code here 
  }

}

Cheers,

YunaM

Ah, I see. Yeah, different animal 🙂 I just figured, once content is added, why not use the featured image set on the post (or page) used as front-page. Saves a little time, beans can handle image functions, and it makes for keeping image metadata (as well as schema) intact and useful.

Hey J.C. ,

I'm not really following you, right now. I'll look into it a bit later. I just finished wrestling with one animal - I'm sure I'll tackle more of them soon enough. 🙂 .

For now, however, I'm really glad I got this to work. I knew that learning Beans was going to be a 'bumpy ride'. I feel like I'm starting to use some rough and blunt tools, on a very precise piece of informational machinery, that is Beans.

Generally, I like to have a real problem in front of me, that I'm trying to solve - then I go looking for ways to do it, and learn a whole bunch of things along the way.

I wonder what would Thierry say about my little piece of code here 🙂 .

Hey guys,

Great job on digging into Beans and getting your hands dirty. I just want to confirm that your efforts will pay off as once you master Beans, the sky is your limit 😉

Yuna I am really glad that you didn't just wait for a given snippet but tried your utmost best and eventually came up with a working solution (best way to learn). I think we could simplify your code a little so let's look into that.

Do you want this header only on your front page right (I think it is a good time to move that in a page template 🙂 )? Could you take a screen shot of your current header with nav so that I aslo have a visual guide to look at?

Thanks,

Hey Thierry,

Thank you very much for your support and encouragement 🙂

I am starting to see the way the Beans works and I'm awed by its ingenious architecture. I hope that your work will gain a wide recognition it truly deserves.

I also hope that I could contribute to this project. At this point though, I'm still very much a noobie, so perhaps solving concrete problems and demonstrating the solutions is the best way to help others learn 'the Beans way' 🙂

If there are other ways I could contribute, please let me know. 🙂

I'm sure you would have a way of simplifying my code. And I'm really curious how would you do it.

But if you're up for a bit more of a challenge, and for whenever you have time 🙂 , I'll describe what I'm trying to accomplish here, site-wide.

My original point of reference is this website .

I took screenshots of my local test site, with Beans child theme.

Front Page Header shows the front page with a taller header image, compared to other pages. I can control the header height with css only, so that's not a problem.

The BLOG Page Header and OUR STORY Header show the 'normal' header heights, on other pages.

Each page would have a unique message on top of the header image, to make it very clear to the visitor - what page they're on. Perhaps this could be done with a widget area ?

Also, ideally - each page would have a unique header image. I know that this could be done with uploading a number of images in the WP admin, and setting them to load randomly. But I wonder how this could be more specific, and tie a header image to a particular page.

The Main navigation bar sits below the Header image and sticks to the top of the page ( once the user scrolls past it - as in my code above ). This navbar behaviour would be the same for all pages of the site.

So, it's definitely a good idea to have a separate Page Template for the Front page, because Front page would also have other customizations - but I can see that for this particular application most of the code would still go to functions.php , since it would be applicable site-wide.

Cheers,

YunaM

Hi,

Here's an update.

I found this plugin Custom Header Extended , which provides a way to choose a custom header per specific post or a page. So that resolves several things that I was trying to accomplish here.

I feel embarrased that I didn't look for it earlier. Since I'm learning the Beans now, the reliance on an external plugin comes as a second ( or third ) choice. But I think that in this case it's the simplest solution, which allows me to have both the image and the text ( as a transparent layer ) on top of it, in a png file.

What I'm still curious about though, is what would be the most optimal code, to bring the main navbar below the header, together with the branding area, and have both the sticky component activated on that navbar, with both 'showup:true' and the animated re-appearance of the navbar , on scroll-up. As shown here.

I was able to add the two parameters , showup:true and uk-animation-slide-top to the navbar on a static page using UIkit components. I tried several ways to have the same thing within Beans, but I've had no success so far.

Cheers,

YunaM

Hey Yuna,

Let's do one thing at the time 🙂 I think it is a good idea to move the stuff for your home page out of your child theme functions.php into a page template to add a bit of structure and keep it clean (in fact your functions.php should theoritically only have the global stuff). To do so, you are going to add a file called front-page.php.

In this file you are going to move all your code which are in the is_front_page() statement straight into your front-page.php without the if statement and wp action and callback function. Then it is very important to always add beans_load_document() right at the bottom of your template file otherwise nothing will load and your page will be blank.

So let's say that you have the following code in your child theme functions.php:

add_action( 'wp', 'example_setup_document' );

function example_setup_document() {

    if ( is_front_page() ) {
        beans_add_attribute( 'beans_body', 'class', 'example-home-page-class' );
        // More code specific to the front page.
    }

}

Here is what your front-page.php would look like to achieve the same result:

<?php

beans_add_attribute( 'beans_body', 'class', 'example-home-page-class' );
// More code specific to the front page.

// Always call this function at the bottom of a template file.
beans_load_document();

This will help organise your codes in a better way 🙂 Refer to this article for more details. Also check this discussion which relateds to building custom page templates.

Happy coding,

Hey Thierry,

Thank you for your reply and the code snippet. They both help my understanding of Beans . It's coming along slowly. 🙂

In the meantime, this little project has morphed into something quite a bit bigger.

I think I will break it into smaller pieces and start a new thread about it , to make it more manageable.

Cheers,

Yuna M.