[Resolved] Showing Element Header photo after post title

[Ivan Cazorla]

Hi there, is it possible to show an element header background photo after the post blog title, instead of shoing it before?

I’ve also tried to create 2 element headers (one with a photo and another one with the title), but they never show together when activated.

Let me know.

[Ivan Cazorla]

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

[Leo]

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 🙂

[Ivan Cazorla]

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

[Leo]

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

[Ivan Cazorla]

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

[Ivan Cazorla]

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.

[Leo]

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.

[Ivan Cazorla]

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!

[David]

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

[Ivan Cazorla]

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

[Ivan Cazorla]

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

thanks,

[David]

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?

[Ivan Cazorla]

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

thanks

[David]

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.

[Author]

Posts