Skip to content

Hero Image from Featured Image

Eric Debelak edited this page Jul 10, 2017 · 1 revision

The theme by default has a hero image on pages and posts with a featured image.

The pertinent code is found in functions.php:

//* Use Featured Image as Hero Image with Title
add_action('genesis_after_header', 'eleven_online_add_hero_area');
function eleven_online_add_hero_area()
{
    if (!is_front_page()) {
        if (is_single() || is_page()) {
            if (has_post_thumbnail()) {
                // add the title with in a single hero area
                echo '<div class="single-hero" style="background: url(' . get_the_post_thumbnail_url(get_the_ID(), 'full') . ')"><div class="wrap"><div class="hero-content"><h1>' . get_the_title() . '</h1></div></div></div>';
                // remove the default title
                remove_action('genesis_entry_header', 'genesis_do_post_title');
            }
        }
    }
}

Styling is found in sass-partials/_single-post.sass:

.single-hero
	background-size: cover !important
	background-position: center !important
	.hero-content
		margin: 100px 0
		text-align: center
		h1
			color: $accentColor
			text-shadow: 0 0 7px $textColor

This can be freely changed. For instance to add a default image in a hero section, you might do this:

//* Use Featured Image as Hero Image with Title
add_action('genesis_after_header', 'eleven_online_add_hero_area');
function eleven_online_add_hero_area()
{
    if (!is_front_page()) {
        if (is_single() || is_page()) {
            if (has_post_thumbnail()) {
                // add the title with in a single hero area
                echo '<div class="single-hero" style="background: url(' . get_the_post_thumbnail_url(get_the_ID(), 'full') . ')"><div class="wrap"><div class="hero-content"><h1>' . get_the_title() . '</h1></div></div></div>';
                // remove the default title
                remove_action('genesis_entry_header', 'genesis_do_post_title');
            } else {
                // add the title with in a single hero area with a default image
                echo '<div class="single-hero" style="background: url(' . get_stylesheet_directory_uri() . '/images/background.jpg)"><div class="wrap"><div class="hero-content"><h1>' . get_the_title() . '</h1></div></div></div>';
                // remove the default title
                remove_action('genesis_entry_header', 'genesis_do_post_title');
            }
        }
    }
}