No announcement yet.

How to create "Hero" image under header navigation.

  • Filter
  • Time
  • Show
Clear All
new posts

  • How to create "Hero" image under header navigation.

    page-featured-image-title-genesis.jpg page-featured-image-title-genesis.jpg Hello

    I'm trying to place an image/photo below the header navigation on the home page.
    I believe its called a "Hero" or "Hero Image". I've attached a picture that represents what I'm trying to do specifically as I've seen different versions of it but all termed "Hero". Ultimately, it would be nice to know how to do this successfully with a unique image on selected individual pages or posts. Anybody have a solution? Thanks.

    I'm using a dynamik child theme (version 1.9.9) on genesis version (2.4.2)

    Here's what I've already tried with a little success and without.
    1. Dynamik>Design>EZ>Feature TOP EZ Widget Areas>Feature Top Container BG>uploaded image. Inserts the image, but shows
    the widget place holder text from Dynamik and does not scale well.
    2. Dynamik>Design>EZ>Feature TOP EZ Widget Areas>Feature Top Container BG>HTML in widget text box <src="image">The issue with this is the image is NOT fully responsive, it scales a bit for smaller screens then gets distorted.
    3. Inserted the following code in Dynamik Custom functions.php and CSS (Code credit: This seemed to work the best compared to the options I tried. I'm guessing it did not work as I intended due the media page inquires in the .php code are not fully compatible with Dynamiks responsive settings? But do not know how to modify it correctly.
    //Add hero image above post/page content

    // Create new image size for our hero image
    add_image_size( 'hero-image', 1400, 400, TRUE ); // creates a hero image size

    // Hook after header area
    add_action( 'genesis_after_header', 'bw_hero_image' );

    function bw_hero_image() {
    // If it is a page and has a featured thumbnail, but is not the front page do the following...
    if (has_post_thumbnail() && is_page() ) {
    // Get hero image and save in variable called $background
    $image_desktop = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'hero-image' );
    $image_tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'large' );
    $image_mobile = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'medium' );

    $bgdesktop = $image_desktop[0];
    $bgtablet = $image_tablet[0];
    $bgmobile = $image_mobile[0];

    // You can change above-post-hero to any class you want and adjust CSS styles
    $featured_class = 'above-post-hero';

    <div class='<?php echo $featured_class; ?>'></div>
    <?php echo ".$featured_class "; ?> {background-image:url( <?php echo $bgmobile; ?>);height:176px;}

    @media only screen and (min-width : 480px) {
    <?php echo ".$featured_class "; ?> {background-image:url(<?php echo $bgtablet;?>);height:276px;}

    @media only screen and (min-width : 992px) {
    <?php echo ".$featured_class "; ?> {background-image:url(<?php echo $bgdesktop;?>);height:400px;}


    .above-post-hero {
    background-position:50% 50%;

    4. Tried the following plugin without the results I'm looking for.
    Attached Files
    Last edited by jon356a; 12-22-2016, 11:15 PM.

  • #2
    Here's a workable solution that anyone can use that is running Dynamik Builder on Genesis Framework and wants to display a "HERO Image" under the header navigation bar that is fully responsive and scales nicely. No plugin needed and No paid support required. PS. Dynamik builder will grow on you but the documentation is in need of a SERIOUS OVERHAUL.

    1. Upload the image via Dynamik Design>Images (and copy the URL)
    2. Goto Dynamik Design>EZ>Feature TOP EZ-Widget Areas
    3. Choose the display location ie: Home, Posts, Pages, Archive etc. and any other applicable parameters. (Save Changes)
    4. Goto Dynamik Custom>CSS
    5. Paste this CSS Code: #ez-home-top-container {
    background: #FFFFFF url ('http://URL of Image copied in step #1') top center no-repeat;
    } (Save Changes)
    6. Goto WP>Appearance>Widgets>EZ Feature Top1
    7. Add a "Text" Widget
    8. Add HTML to the "Text" Widget: <img src="http://URL of the image uploaded via dynamik design"> (Same URL used in step #5) then (Save Changes)


    • #3
      I'll post a follow-up on how to display different HERO images on other pages and posts as soon as I figure it out. I suspect it has something to do with Creating Dynamik Custom>Conditionals and unique "Page ID's" and "Hook Boxes". Or maybe someone with the solution will share it sooner?


      • #4
        Easiest and most versatile solution would be to use Dambuster and Beaver Builder Lite.
        This could be used on any number of pages and allow full width content.
        The added benefit is that making it responsive is much easier.

        Note this site also feature a cool sticky and mobile menu.


        • #5
          If you´re interested: I´ve got some Docs for adding variations of Hero sections / Feature Top on my demo site for the skin "Amare". See menu item "Feature Top" here: