Replacing header image with featured/image or custom field

Hello! Slowly getting into Beans and it seems very promising. I love the speed. I'm struggling a bit.

I want to create a fullwidth header width a background image. Ideally it could be the featured image of the page/post or a custom field. What I want to do:

1. Remove the Beans Header Image from Backend Customization
2. Replace it with Featured Image or Custom Field
3. Being able to add overlays to those images

I am trying to acheive something like in the image below. Sorry/Not Sorry for the steal from Genesis Framework.

https://www.dropbox.com/s/ewk2434yybtr2qq/Screenshot%202017-01-19%2008.14.34.png?dl=0

I have already tried I little bit but I don't seem to be getting anywhere. Do I have to print the image URL for a featured image as an inline-style as well?

Hi Olaf, below is a quick draft which may be added in your child theme:

// Remove customizer custom header image option.
add_action( 'after_setup_theme', 'example_theme_setup' );

function example_theme_setup() {

  remove_theme_support( 'custom-header' );

}

// Add full screen header image.
add_action( 'wp_head', 'example_header_image' );

function example_header_image() {
  $image_url = get_the_post_thumbnail_url( null, 'full' );

  // Set a default image if no feature image is found.
  if ( false === $image_url ) {
   $image_url = 'https://getuikit.com/v2/docs/images/placeholder_800x400_1.jpg';
 }

 ?><style type="text/css">
   .tm-header {
      background-image: url(<?php echo esc_url( $image_url ); ?>);
      background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
     min-height: 100vh;
    }
 </style><?php

}

In the snippet above, the first function removes the custom header image in customizer and the second function set the feature image (default image if not found) and set it as the header background. Note that it also sets the header to fullscreen min-height: 100vh;. The snippet above is just a start which you may adapt to your needs ;-)

Have fun,

How would you add a header text into something like this? say for example an animation like on Yoo theme Fuse template

https://demo.yootheme.com/wordpress/fuse

Hi Dee,

Here is an example snippet which goes in your child theme front-page.php:

<?php
/**
 * Front page template.
 */

add_action( 'beans_uikit_enqueue_scripts', 'example_view_enqueue_uikit_assets' );
/**
 * Enqueue UIkit assets.
 */
function example_view_enqueue_uikit_assets() {
 beans_uikit_enqueue_components( array( 'cover', 'flex', 'contrast', 'animation' ) );
}

add_action( 'beans_header_after_markup', 'example_view_header_image' );
/**
 * Add header email section with site title tag.
 */
function example_view_header_image() {
  $header_image = get_header_image();

 ?>
  <div class="uk-contrast uk-flex uk-flex-middle uk-cover-background uk-position-relative uk-height-viewport" style="background-image: url(<?php echo esc_url( $header_image ); ?>);">
    <div class="uk-position-cover" style="background-color: rgba(0, 0, 0, 0.14);"></div>
    <div class="uk-container uk-container-center uk-width-1-1">
     <h1 class="uk-grid-margin uk-animation-slide-top uk-animation-top-left"><?php echo esc_html( get_bloginfo( 'description' ) ); ?></h1>
   </div>
  </div>
  <?php

}

// Adjust header.
beans_remove_action( 'beans_header_image' );
beans_remove_action( 'beans_site_title_tag' );
beans_add_attribute( 'beans_site_branding', 'class', 'uk-margin-small-top' );

// This is for the sake of the example but should ideally be set in a stylesheet.
beans_add_attribute( 'beans_header', 'style', 'position: fixed; background: rgba( 255, 255, 255, .9); width: 100%; z-index: 100;' );

// Load the document which is always needed at the bottom of page templates.
beans_load_document();

Here are the steps to follow:

1. Create a front-page.php in your child theme
2. Paste the snippet above in that file
3. Go to your admin customizer and set this image (for example) under Header Image
4. The text in the example is pulling from the Site Title which you may change in the customizer Site Identity

Note that this is just an example draft which should get you going, I will let you adapt it to your needs 😉

Happy coding,

Perfect I understand completely.

I remove the Adjust header actions and beans_add_attribute as I didn;t want the fixed position.

i switched

beans_header_after_markup

with

wp_head

But I was wondering How I would allow the header and menu to be overlayed instead of being pushed to the bottom.

Hi Dee,

wp_head isn't the correct action as if fire before the open body (see here).

Revert it to beans_header_after_markup and simple change position: fixed; with position: absolute;.

Happy coding,