Using a Pages Featured Image as image in a Header - functions.php

Before the recent updates to WP 5.7.1 and the theme to ProVersion: 4.3.3 I was using this code in my functions.php then placing the shortcode [thumbnail] in Row2 and it worked perfectly.

// Use Shortcode to display fullsize Featured Image
add_shortcode('thumbnail', 'thumbnail_in_content');

function thumbnail_in_content($atts) {
    global $post;
	the_post_thumbnail('full');
}
// END Use Shortcode to display fullsize Featured Image

But now the image has moved above to above Row1 and leaves a white-space between Row1 and Row3 - https://www.theheritagealliance.org.uk/our-work/heritage-update/

Does anyone have any ideas as to why and how to fix it?

I have found some other code buy my php skills are not excellent and I think the “add_action” section is causing it not to work, as you can see here - https://www.theheritagealliance.org.uk/our-work/our-events/ but it does display in the right place!!

// Use Featured Image as Banner Image - https://iversendesign.com/using-featured-image-header-image/
add_action( 'genesis_before_content' , 'featured_image_header');

function featured_image_header() {
	if ( !is_home() && has_post_thumbnail()) { $imgID = get_post_thumbnail_id($post->ID);
	$featuredImage = wp_get_attachment_image_src($imgID, 'full' );
	$imgURL = $featuredImage[0]; ?>
	<div class="featured-page-image" style="background: url(<?php echo $imgURL ?>);"></div>
	<?php }
	}
// END Use Featured Image as Banner Image

Does anyone have any ideas as to why and how to fix the php add_action section or able to offer advice?

Hello Adam,

Thanks for writing in!

1.) Please the [thumbnail] shortcode inside the raw or text element in one of your bar for your header.

2.) The PHP code only applies to the Genesis framework. It will not work and applicable to the Pro theme.

Best Regards.

Hello Ruenel,

I had the shortcode in a Raw element originally (which is what appears to have broken since the update) but by replacing the Raw with a Text element and inserting the shortcode as HTML and then setting the class “featured-image-header” on the Container with this CSS below it is now working again.

.featured-image-header img {
  width: 1920px;
  height: 350px;
  object-fit: cover;
}

Not as straightforward as the original Raw element method but it works… thanks for you help.

Hi Adam,

Glad that it worked for you.

Thanks

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.