Adding a full width featured image behind the title
NB! This is a rewrite of the tutorial making it even easier to use then the original tutorial.
The result should look something like the below.
Full width featured image behind the title
I have looked at how Showcase Pro (I added my affiliate link) a Genesis Child theme has added a full width featured image behind the title and have copied how they did it there to my own custom Altitude Pro Genesis child theme.
This is what I need to do (which has totally changed from what I had earlier)
Duplicate single.php (affects blog posts) from the root folder of Showcase Pro to Altitude Pro.
Or just copy the following code into a new single.php in the root folder of Altitude Pro.
single.php from ShowCase Pro.
<?php
/**
* Showcase Pro *
* This file edits the single template in the Showcase Pro Theme. *
* @package Showcase * @author Bloom
* @license GPL-2.0+ * @link
http://my.studiopress.com/themes/showcase/
*/
// 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;
}
genesis();
NB! If you also want the same affects on pages then duplicate the single.php and rename it to page.php.
single.php = affects only single blog posts.
page.php = affects all pages.
Also add the same affect to the blog preview page.
Here is the blog preview page home.php file from the theme Boss Pro also from Bloom. Copy the code into a new home.php in your own theme (root folder).
<?php /** * Boss Pro * * This file edits the posts page template in the Boss Pro Theme. * * @package Boss * @author Bloom * @license GPL-2.0+ * @link http://my.studiopress.com/themes/boss/ */
add_filter( 'body_class', 'boss_home_page_header_body_class' );
/**
* Add the with-page-header class. *
* @param array $classes
* @return void
*
* @since 1.0.0
*/
function boss_home_page_header_body_class( $classes ) {
$posts_page_id = get_option( 'page_for_posts' );
if ( has_post_thumbnail( $posts_page_id ) ) {
$classes[] = 'with-page-header'; }
return $classes;
}
add_action( 'genesis_after_header', 'boss_home_page_header', 8 );
/**
* Add the Home Page Header.
*
* @return void
*
* @since 1.0.0 *
/function boss_home_page_header() {
$output = false;
$posts_page_id = get_option( 'page_for_posts' );
$image = get_post_thumbnail_id( $posts_page_id );
if ( $image ) {
// Remove the page title because we're going to add it later.
remove_action( 'genesis_before_loop', 'genesis_do_posts_page_heading' );
// Remove the default page header.
remove_action( 'genesis_after_header', 'boss_page_header', 8 );
$image = wp_get_attachment_image_src( $image, 'boss_hero' );
$background_image_class = 'with-background-image';
$title = get_the_title( $posts_page_id );
$output .= '<div class="page-header bg-primary with-background-image"
style="background-image: url(' . $image[0] . ');"><div class="wrap">';
$output .= '<div class="header-content"><h1>' . $title . '</h1></div>';
$output .= '</div></div>';
}
if ( $output ) {
echo $output;
}
}
genesis();
I picked out various CSS that I noticed affected the page-header, title and background title image.
The following is from ShowCase Pro style.css that I added to the bottom of the style.css of Altitude Pro.
/* From Showcase pro theme */
/* Background Images and Colors
* ========================================================================== */
.with-background-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.with-background-image:after {
-ms-filter: "alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.30;
}
.bg-primary,
.bg-primary a {
color: #fff;
}
[class*="bg-"],
[class*="bg-"] .wrap {
position: relative;
z-index: 2;
}
.bg-primary:after,
.bg-light-gray:after {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.bg-primary:after {
background: #1a1a1a;
}
.bg-light-gray:after {
background: #dcdcdc;
}
/* Page Header
* ========================================================================== */
.page-header {
padding: 8rem 0;
position: relative;
text-align: center;
color: #fff;
background-color: #1a1a1a;
}
.page-header h1,
.page-header .author-box-title {
line-height: 1.2;
font-size: 40px;
display: inline-block;
}
.page-header h1:last-child {
margin-bottom: 0;
}
.page-header p {
font-size: 2.4rem;
max-width: 74rem;
margin-left: auto;
margin-right: auto;
}
.page-header p:last-child {
margin-bottom: 0;
}
.page-header a:not(.button) {
opacity: .5;
}
.page-header a:hover:not(.button) {
opacity: 1;
}
/* The following only affects the pages in the site inner.
It brings the entry meta closer to the title. */
.single .site-inner, {
margin-top: 0;
}
.single .entry-header p.entry-meta {
margin-top: -80px;
}
.entry-header::after {
border-bottom: none;
}
.category .site-inner,.blog .site-inner {
margin-top: 60px;
}
@media only screen and (min-width: 800px) {
.page-header {
padding: calc(7% + 10.8rem) 0 7%;
}
.home .page-header {
padding: calc(10% + 10.8rem) 0 10%;
}
.page-header h1,
.page-header
.author-box-title {
font-size: 6rem;
}
.page-header
.entry-meta {
font-size: 1.6ren;
}
/* Added */
.page-header h1,
.page-header
.author-box-title {
font-size: 6rem;
text-align: center;
}
}
Let me know how it works for you.
I am working on getting this tutorial to work correctly without errors: catapultthemes.com/adding-an-image-upload-field-to-categories/ It adds a featured image to the category page. I have been able to get the code to display behind the category titles on the frontend.
Hey Paal Joachim,
I followed your example on genesis sample theme for both posts and pages and it works a treat many thanks for this 🙂