Default page header image in Showcase Pro

Posted on Leave a comment
5/5 - (232 votes)

In Genesis Facebook group a user asks:

SHOWCASE-PRO, does anyone know how to load a default “Featured image” on Posts & Pages if none has been attributed to that post or page?

This article presents the customizations in Showcase Pro 2.0.2 to display a default/fallback image for page header for Posts and Pages that do not have a featured image set.

Step 1

In functions.php replace

/**
 * Page Header Class
 *
 */
function showcase_page_header_body_class( $classes ) {

    if( is_page() && has_post_thumbnail() )
        $classes[] = 'with-page-header';

    return $classes;

}

/**
 * Page Header
 *
 */
function showcase_page_header() {
    $output = false;
    if( is_page() ) {

        $image = get_post_thumbnail_id();

        if( $image ) {

            // Remove the title since we'll add it later
            remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

            $image = wp_get_attachment_image_src( $image, 'showcase_hero' );
            $background_image_class = 'with-background-image';
            $title = the_title( '<h1>', '</h1>', false );

            $output .= '<div class="page-header bg-primary with-background-image" style="background-image: url(' . $image[0] . ');"><div class="wrap">';
            $output .= '<div class="header-content">' . $title . '</div>';
            $output .= '</div></div>';
        }
    }

    if( $output )
        echo $output;
}

with

/**
 * Page Header Class.
 *
 */
function showcase_page_header_body_class( $classes ) {
    if ( is_page() && ! is_front_page() && ! is_page_template( 'page_landing.php' ) ) {
        $classes[] = 'with-page-header';
    }

    return $classes;
}

/**
 * Page Header.
 *
 */
function showcase_page_header() {
    $output = false;

    if ( is_page() && ! is_front_page() && ! is_page_template( 'page_landing.php' ) ) {

        $image = get_post_thumbnail_id();

        // Remove the title since we'll add it later.
        remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

        $image = wp_get_attachment_image_src( $image, 'showcase_hero' );

        $background_image_class = 'with-background-image';

        $title = the_title( '<h1>', '</h1>', false );

        if ( $image ) {
            $background_image_url = $image[0];
        } else {
            $background_image_url = CHILD_URL . '/images/page-header.jpg';
        }

        $output .= '<div class="page-header bg-primary with-background-image" style="background-image: url(' . $background_image_url . ');"><div class="wrap">';

        $output .= '<div class="header-content">' . $title . '</div>';

        $output .= '</div></div>';
    }

    if ( $output ) {
        echo $output;
    }
}

We are setting the fallback image as page-header.jpg from the theme’s images directory.

Step 2

In single.php replace

// Add page header body class to the head.
add_filter( 'body_class', 'showcase_single_page_header_body_class' );
function showcase_single_page_header_body_class( $classes ) {

    if( has_post_thumbnail() )
        $classes[] = 'with-page-header';

    return $classes;

}

// Add page header.
add_action( 'genesis_after_header', 'showcase_single_page_header', 8 );
function showcase_single_page_header() {
    $output = false;

    $image = get_post_thumbnail_id();

    if( $image ) {

        // Remove the title since we'll add it later
        remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

        $image = wp_get_attachment_image_src( $image, 'showcase_hero' );
        $background_image_class = 'with-background-image';
        $title = the_title( '<h1>', '</h1>', false );

        $output .= '<div class="page-header bg-primary with-background-image" style="background-image: url(' . $image[0] . ');"><div class="wrap">';
        $output .= '<div class="header-content">' . $title . '</div>';
        $output .= '</div></div>';
    }

    if( $output )
        echo $output;
}

with

// Add page header body class to the head.
add_filter( 'body_class', 'showcase_single_page_header_body_class' );
function showcase_single_page_header_body_class( $classes ) {
    $classes[] = 'with-page-header';

    return $classes;
}

// Add page header.
add_action( 'genesis_after_header', 'showcase_single_page_header', 8 );
function showcase_single_page_header() {
    $output = false;

    $image = get_post_thumbnail_id();

    // Remove the title since we'll add it later.
    remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

    $image = wp_get_attachment_image_src( $image, 'showcase_hero' );

    $background_image_class = 'with-background-image';

    $title = the_title( '<h1>', '</h1>', false );

    if ( $image ) {
        $background_image_url = $image[0];
    } else {
        $background_image_url = CHILD_URL . '/images/page-header.jpg';
    }

    $output .= '<div class="page-header bg-primary with-background-image" style="background-image: url(' . $background_image_url . ');"><div class="wrap">';

    $output .= '<div class="header-content">' . $title . '</div>';

    $output .= '</div></div>';

    if ( $output ) {
        echo $output;
    }
}

Like before, we are setting the fallback image as page-header.jpg from the theme’s images directory.

Leave a Reply

Your email address will not be published. Required fields are marked *