• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

13 July - 2016 By Paal Joachim 5 Comments
Last updated on: January 22, 2018

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 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    
https://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    https://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.

 

Share this:

  • Email

Categories: Genesis, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. kumar says

    15 September - 2020

    Thanks writing post sir this post is very help full

    Reply
  2. kumar says

    15 September - 2020

    Thankyu for writting post this post is very helpfull

    Reply
  3. kami says

    12 April - 2020

    thanks for nice article

    Reply
  4. Clayton Chase says

    2 February - 2018

    Works great! Thank you 🙂

    Reply
  5. Michael says

    15 October - 2017

    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 🙂

    Reply

Leave a Comment Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2022 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪