[Support request] Featured image in the Header Element

[qpaq]

Is there a way to display the featured image with preferred sizing in the header element before the post title and content? I was able to display it via a shortcode but couldn’t make the size adjustments and also couldn’t display the captions? Ideally, I’d like to show the featured image in the hero area aligned to the right with rounded corners with approx. 500x300pixel dimensions with the post title on the left?

Screenshot

[David]

Hi there,

first you would need to register a new Image size for your 500 , 300px image.
You can do that with this PHP Snippet:

// Create new image size for hero
add_action( 'init', function() {
    add_image_size( 'hero-image', 500, 300, true );
} );

// Set new image size for hero
add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'hero-image';
} );

Then you will need to install and run the Regenerate Thumbnails plugin to create these new image sizes for existing media attachments.

For the Header Element you can use this template tag to display your image within the content:

{{custom_field._thumbnail_id}}

If you can wrap that in some HTML like so i can provide the CSS for alignment etc.

<div class="hero-wrap">
   <div class="hero-wrap-column">
      {{post_title}}
   </div>
   <div class="hero-wrap-column">
      {{custom_field._thumbnail_id}}
   </div>
</div>

Please provide a link to where i can see these changes.

[qpaq]

Hi David,

I guess I’ve managed to do it, slightly different than what you’ve shown. I couldn’t make it with wrapping with div but able to approach to the solution with the header element.

<h1>
{{post_title}}
</h1>
{{post_date}} | by {{post_author}} 
<p>
	{{post_terms.category}} 
</p>
{{custom_field._thumbnail_id}}

[Elvin]

Hi,

Your code could work but it’ll still require a styling.

Can you try David’s approach again?

Here’s a slightly modified version of his code:

<div class="hero-wrap">
   <div class="hero-wrap-column">
	<h1 class="page-title">
	{{post_title}}
	</h1>		
   </div>
		
   <div class="hero-wrap-column">
      {{custom_field._thumbnail_id}}
   </div>
</div>

And here’s the CSS:

.hero-wrap{
  display:flex;
  flex-direction:row;
  justify-content: center;
} 
.hero-wrap-column{
  padding: 20px;
  text-align: left;
}

[qpaq]

Thanks Elvin, that worked out like a charm. I’ll play around with CSS to style it.

[Elvin]

Nice one. No problem.:)

[qpaq]

Hi,

I have an additional issue with this already resolved topic.

I’d like to add an additional header image out of the featured image of the post. The size would be 700px wide. But I don’t want to change the existing header images of (500×300 pixel in dimension) I was able to generate additional thumbnail sizes in 700px width. But can’t make them to be displayed on the posts. The codes are below.

The PHP Snippet to create thumbnails in 700px wide from featured images of the posts.

// Create new image size for event hero
add_action( 'init', function() {
    add_image_size( 'eventhero-image', 700, true );
} );

// Set new image size for event hero
add_filter( 'generate_hero_eventthumbnail_id_size', function() {
    return 'eventhero-image';
} );

The Element snippet:

<div align="left" style="padding-bottom: 10px"> 
{{post_terms.content_type}}
</div>

<div class="hero-wrap">
   <div class="heroimg-wrap-column">
      {{custom_field._eventhero_eventthumbnail_id}}
   </div>
	<div class="hero-wrap-column">
		<h2 align="left" class="page-title">
{{custom_field.event_type}}</h2>
	<h1 align="left" class="page-title">
	{{post_title}}
	</h1>	
   </div>
	
</div>

	
 <div class="postmeta-row-profile" >
		[page_hero_gravatar] by {{post_author}} | {{post_date}} | {{post_terms.category}}
		</div>

I include the page sample below for you to check it out.

[David]

Hi there,

in your hero-wrap contain change:

{{custom_field._eventhero_eventthumbnail_id}}

to:

{{custom_field.thumbnail_id}}

This should return the image size you applied in the generate_hero_eventthumbnail_id_size filter

[qpaq]

Hi David,

Thanks for your message but that didn’t work out. It retrieves the existing image size not the one with the new 700px width.

Shouldn’t the generate_hero_eventthumbnail_id_size be the same as the same one called inside the element header?

[David]

Aah spotted another error

This is incorrect:

// Set new image size for event hero
add_filter( 'generate_hero_eventthumbnail_id_size', function() {
    return 'eventhero-image';
} );

It should be:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'eventhero-image';
} ); 

Then change to custom field template tag i provided above will work

[qpaq]

Hi David,

I need two different featured image sizes to display in different post types. The provided code changes the featured images thumbnails and overrides the existing snippet.

EXISTING SNIPPET FOR HERO IMAGES FROM FEATURED IMAGES OF THE POST

// Create new image size for hero
add_action( 'init', function() {
    add_image_size( 'eventhero-image', 500, 300, true );
} );

// Set new image size for hero
add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'hero-image';
} );

NEW SNIPPET FOR HERO IMAGES FROM FEATURED IMAGES OF THE POST

// Create new image size for event hero
add_action( 'init', function() {
    add_image_size( 'eventhero-image', 700, 400, );
} );

// Set new image size for event hero
add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'eventhero-image';
} ); 

In regular posts’ header element I retrieve featured images by {{custom_field.thumbnail_id}}

So I think I need a new custom field for the additional 700px wide images? Am I wrong?

[David]

First you would need to add your two new image sizes:

// Add new image sizes 
add_action( 'init', function() {
  add_image_size( 'eventhero-image', 500, 300, true );
  add_image_size( 'your-other-image-name', 700, 400, true );
} );

Then you use a single filter that will set the image size depending on the Singular post that is being viewed.

add_filter( 'generate_hero_thumbnail_id_size', function($size) {
  // Set defaults size if conditions not met
  $size = 'full';
  // Check if post is your_first_post_type
  if ( is_singular( 'your_first_post_type' ) ) {
    $size = 'eventhero-image';
  }
  // Else check if is your_other_post_type
  elseif ( is_singular( 'your_other_post_type' ) ) {
    $size = 'your-other-image-name';
  }
  // Return the thumbnail size
  return $size;
}); 

[qpaq]

Hi David, I understand what you wish to do but couldn’t make it. I think I have a problem to understand the post_type. I’m using custom post types named as profiles and events.

When I insert these two into ‘your_first_post_type’ and ‘your_other_post_type’ the snippet gives a fatal error.

[Elvin]

Hi there,

Can you share the error message you’re seeing? So we could have an idea where the issue is specifically coming from.

I’ve backread the topic and I’ve noticed a mismatch on the things you’ve been using.

Aside from the other things David pointed out, I noticed that you used this:

// Set new image size for hero
add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'hero-image';
} );

This PHP snippet implies you’re trying to use an added image size hero-image but I don’t see you registering it.

On this code:

// Create new image size for hero
add_action( ‘init’, function() {
add_image_size( ‘eventhero-image’, 500, 300, true );
} );

I see you added eventhero-image, not hero-image. This can be an issue.

David fixed some on his reply here:
https://generatepress.com/forums/topic/featured-image-in-the-header-element/#post-1739194

But on his code, you’re supposed to change 3 things which are:

your_first_post_type in if ( is_singular( 'your_first_post_type' ) ),

your_other_post_type in elseif ( is_singular( 'your_other_post_type' ) )

and your-other-image-name in $size = 'your-other-image-name'; assuming you’ve added another image size for the other post type. Else, use eventhero-image on this as well.

[qpaq]

Hi Elvin,

Thanks for your message. I got rid of the fatal error. However I couldn’t make the posts to retrieve the resized thumbnails. When I run this David’s snippet normal sized images are displayed.

I have used PODS to create content_type as Custom Post Types. I have events and profiles post types. I’ve managed to fabricate two sets of featured images.

add_action( 'init', function() {
  add_image_size( 'hero-image', 500, 300, true );
  add_image_size( 'eventhero-image', 700, 400, );
} );

What should I write instead of your_first_post_type and your_other_post_type

[Author]

Posts