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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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;
}

A wise man once said:
"Have you cleared your cache?"

[qpaq]

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

[Elvin]

Nice one. No problem.:)

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts