Question 182269 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress Genesis Theme Not Displaying A Custom Hero Image Using Featured Image

I’ve built a WordPress website based on the Genesis Framework. A custom function is present on the functions.php, see below, and I’m getting the error messages, also below, when updating the server’s PHP from 7.4 to 8.X. Looking to upgrade the website’s PHP to 8.0 for security and speed functionality and display the custom featured image function on the front end of the website.

The website is locally being worked on, no link can be provided.

WARNING: UNDEFINED VARIABLE $PAGE IN FUNCTIONS.PHP
WARNING: ATTEMPT TO READ PROPERTY "ID" ON NULL IN FUNCTIONS.PHP
WARNING: UNDEFINED VARIABLE $PAGE IN FUNCTIONS.PHP
WARNING: ATTEMPT TO READ PROPERTY "ID" ON NULL IN FUNCTIONS.PHP
WARNING: UNDEFINED VARIABLE $PAGE IN FUNCTIONS.PHP
WARNING: ATTEMPT TO READ PROPERTY "ID" ON NULL IN FUNCTIONS.PHP

//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() && !is_front_page() &&!(is_page('about-peter')) ) {

        // 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];
        $mobile_width = $image_mobile[1];
        $mobile_height = $image_mobile[2];
        $featured_class = 'above-post-hero';
 ?> 

<div class='<?php echo $featured_class; ?>'></div>
<style>
    <?php echo '.'.$featured_class.' { margin: auto; background-image:url( '.$bgmobile.'); height:'.$mobile_height.'px; width: '.$mobile_width.'px; } '; ?>
        @media only screen and (min-width : 480px) {       
        <?php echo ".$featured_class "; ?> {background-image:url(<?php echo $bgtablet;?>);height:276px;width:100%}
        }

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

<?php

    } 
}

Tried adding the is_page() function, inside the bw_hero_image function, with an array of the pages not displaying the featured image, did not help. Attempted to add the is_page() function with the page’s slug as a string for the featured image, did not work.

When performing that last attempt, the error message disappears but the feature image are not displayed on the pages.

Tags:

2

Answers


  1. 0

    this code to change defute Genesis Framework seeting from title hero to header/background image using featured image:

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

function abukotsh_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() || is_home()) {
        // 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; ?>'><h1 class="custom-title">AJ Customs Finishes in Las Vegas<br>Call 702-795-7338 today!</h1></div>
<style>
    <?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;}
        }
</style>
<?php
    } 
}
    Login or Signup to reply.
  2. 0

    The error message says that you are missing the $page variable.

    In this particular case, you shouldn’t be using $page but $post and use it from the global scope.

    function bw_hero_image() {
    global $post; // ADDED THIS

    // 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() && !is_front_page() &&!(is_page('about-peter')) ) {

        // Get hero image and save in variable called $background
        
        // CHANGED THESE
        
        $image_desktop = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'hero-image' );
        $image_tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
        $image_mobile = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );

        // ...........

    } 
}

    Another solution is to call the get_post_thumbnail_id() with no parameter which will default to the current global $post

    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() && !is_front_page() &&!(is_page('about-peter')) ) {

        // Get hero image and save in variable called $background
        
        // CHANGED THESE
        
        $image_desktop = wp_get_attachment_image_src( get_post_thumbnail_id(), 'hero-image' );
        $image_tablet = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
        $image_mobile = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );

        // ...........

    } 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search