Showing Element Header photo after post title

Like this draw: https://snag.gy/x7svl5.jpg

Hi there,

Wouldn't that just a be feature images below title?
https://docs.generatepress.com/article/adjusting-the-featured-images/

Otherwise I guess you could try inserting the title first using the template tags:
https://docs.generatepress.com/article/page-header-template-tags/#post_title

Then adding a static image after that.

Let me know if this helps :)

It wouldn't work as feature image below title because I want it to be full screen, therefore the max width is the container width.

So I would create one page header with: {{post_title}}

And then another page header with just the background image? Or a manual static image inside the post? Or where?

thanks,
Ivan

Manual static image inside the page hero content after template tag.

So that means I would have to create one new element header for every post with his own image inside?

If I do it like this:

<h1>
	{{post_title}}	 
</h1>
<img src="https://newdeacampada.campingsport.es/wp-content/uploads/2018/10/featured_corduroy_iron_and_resin_banner_photo.jpg">

The image shows inside the container and not in full width.

I'll check with Tom to see if there is a good way to do a full width featured image below the title as it will break the content container.

Also the image isn't full width because your original image is 1170px in width and isn't big enough to be full width.

Alright thanks Leo, keep me updated.

Besides that, I thik you can make a photo cover the entire screen even if its width its not big enough, isn't it?

thanks!

Hi there,

try this, create your Header Element and add your title etc. No background image.
Then new Hook Element > after_header hook, execute PHP checked and priority of 15 then add this for its content:

<?php 
global $post;
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
?>
<div id="post" class="feat-image" style="background-image: url('<?php echo $thumb['0'];?>')"><!-- featured image --></div>

Then try this CSS:

.feat-image {
    padding-top: 56%; /* Adjust to match image aspect ratio */
    background-size: cover;
    background-repeat: no-repeat;
}

Woah! it worked like a champ!! thanks!!

And is it possible to make the image show at its original width instead of fixing it to a certain padding width?

thanks,

That's great. So the image you want displayed at full image size? Which would mean it wouldn't be full width on larger screens?

Oh I didn't realised that. Maybe its better to leave it as it is now.

thanks

Trick is to set the padding % to match the images aspect ratio. Then if all images are the same ratio they should display 100% of the image on all screen sizes.