-
Notifications
You must be signed in to change notification settings - Fork 1
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');
}
}
}
}