Fullwidth featured image behind the title in Genesis

For Pages (static) create a new page and paste below code, and select "Fullwidth Featured Image" at Template options.

<?php
/**
 * Genesis Framework.
 *
  * Template Name: Fullwidth Featured Image
  
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package Genesis\Templates
 * @author  StudioPress
 * @license GPL-2.0+
 * @link    https://my.studiopress.com/themes/genesis/
 */

// This file handles pages, but only exists for the sake of child theme forward compatibility.

// 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();

To enable at Blog post, create a new page called single.php and paste below code

<?php
/**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package Genesis\Templates
 * @author  StudioPress
 * @license GPL-2.0+
 * @link    https://my.studiopress.com/themes/genesis/
 */

// This file handles single entries, but only exists for the sake of child theme forward compatibility.

// 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 below css line at style.css file

/* 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: 4rem;
	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;
}

@media only screen and (min-width: 960px) {
.page-header { 
  padding: calc(2% + 10.8rem) 0 10%;
} 
.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; 
 } 
}

In your style.css file replace below line at media query 960px

.site-header {
	position: fixed;
	width: 100%;
	z-index: 9999;
}

with

.site-header {
	position: relative;
	width: 100%;
	z-index: 9999;
}
Copyright © 2024 Siam Naulak.
magnifiercrossmenu