- This topic has 5 replies, 3 voices, and was last updated 4 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
October 5, 2020 at 4:58 am #1472837
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?
October 5, 2020 at 5:54 am #1472919David
StaffCustomer SupportHi 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/October 5, 2020 at 1:24 pm #1473666qpaq
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}}
October 5, 2020 at 3:04 pm #1473758Elvin
StaffCustomer SupportHi,
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?"October 6, 2020 at 1:24 am #1474144qpaq
Thanks Elvin, that worked out like a charm. I’ll play around with CSS to style it.
October 6, 2020 at 3:14 pm #1475396Elvin
StaffCustomer SupportNice one. No problem.:)
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.