Adding a full width featured image behind the title
The result should look something like the below.
Full width featured image behind the title
Full width image behind the post and page titles
I have looked at how Showcase Pro a Genesis Child theme that has added a full width featured image behind the title.
Then copied the procedure to my own custom Altitude Pro Genesis child theme. One should be able to add the following to most Genesis themes. I am guessing one can likely readjust to work with other themes.
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.
NB! If you also want the same affects on pages in addition to posts then duplicate the single.php and rename it to page.php.
single.php = affects only single blog posts.
page.php = affects all pages.
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();
Add a full width image to the blog 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();
Add the CSS
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 - To add a full width image behind the title. */
/* 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. I will need to look closer at the code again before I post it.
Works great! Thank you 🙂
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 🙂