[Resolved] Post Title and Meta Over Featured Image

[Jatin]

Hi Guys,

I think it may be possible to show the Post Title and Meta Information over Featured Image which will be a clean way to show the single page. Do you know if there is any custom CSS i can use to achieve this. Is it even possible via Generate Press.

Example Pics are in Private Info Box.

[Elvin]

You can definitely do that with PHP filters.

add_filter( 'generate_before_content' ,function($output){
	if(is_single() && has_post_thumbnail()){
		echo '<div class="generate-merge-featured-with-entry-header">';
	} else {
		return $output;
	}
}, 1, 1);

add_filter( 'generate_after_entry_header' ,function($output){
	if(is_single() && has_post_thumbnail()){
		echo '</div>';
	}else {
		return $output;
	}
}, 9999, 1);

add_action( 'wp_head', function () { if(is_single() && has_post_thumbnail()){ ?>
<style>
	.single .generate-merge-featured-with-entry-header{
		position:relative;
	}
	.single header.entry-header{
		position:absolute;
		bottom: 5%;
		left: 5%;
		top: auto;
		right: auto;
	}

</style>
<?php } } );

What this does is, it wraps the featured image and the entry header in one div if the page is a single post page and has post thumbnail. It then styles the newly wrapped elements to display similar to your reference image.

Further styling will be needed for other things incase you want to add more.:)

[Jatin]

Thanks Elvin which section of my site code this needs to be added ?
Can you please provide some direction on how to add the code. Is it in a hook ? Or functions file?

[Jatin]

Hi Elvin, I searched around the forum and found a Plugin call pluginception now. I have adjusted the height and width etc. But how can i change the background of the text. Its not visible properly so i wanted a white background to the text to fix this and also to the Meta. Screenshot sent in private info box.
Also Adjustment of the text as its touching the borders of the image on both sides of image.

> It does not look good on Mobile as well
> Can i show top header bar as links rather than hamburger menu as it shows on my desktop.

[David]

Hi there,

can you provide a link to your site so we can help solve the issue?

[Jatin]

Site link

[David]

Hmmm… i am not sure this is the best way to do this.
Instead of that – it may be easier to create a Header Element for your single posts:

https://docs.generatepress.com/article/header-element-overview/

By default this will appear above the main content.

But we can move it to the position of the Featured Image with this PHP Snippet:

add_filter( 'generate_page_hero_location', function( $location ) {
    if ( is_single() ) {
        $location = 'generate_before_content';
    }

    return $location;
} );

[Jatin]

Thanks David. I have read about the Header Element and adjusted it to make it work with your code. However, two things if you can help me with.

1) I added a black background color to the header element for H1 tag and paragraph tag as you can see in the screenshot: https://imgur.com/ig2RSGG. The information background is spanning the who image. I want to span it only till the Information is written. https://imgur.com/FAXAaNj

2) Can i make the header and meta background transparent [best to have it, if not possible then still ok]

[Elvin]

1) I added a black background color to the header element for H1 tag and paragraph tag as you can see in the screenshot: https://imgur.com/ig2RSGG. The information background is spanning the who image. I want to span it only till the Information is written. https://imgur.com/FAXAaNj

Add inline block so it doesn’t take 100% of the container. display: inline-block;

2) Can i make the header and meta background transparent [best to have it, if not possible then still ok]

It’s definitely possible.

Change the background-color from black to rgba() values so you can use alpha/transparency.

Example: background-color: rgba(0,0,0,0.5);

This rgba color value is of black color with 0.5 or 50% opacity.

You can try picking your rgba color value here. http://www.menucool.com/rgba-color-picker

[Jatin]

Thanks Elvin, It worked fine for Paragraph tag but not for H1 tag. The Bold Code in H1 tag does not work.
So Meta info is displaying correctly now, just the header bit is left.

<h1 style=”background-color: black”; display: inline-block;>
{{post_title}}
</h1>
<p style=”background-color: rgba(0,0,0,0.5); display: inline-block;>
{{post_author}} | {{post_date}} <br/>
{{post_terms.category}}
</p>

Some more info in Private info box.

[David]

Edit your Header Element HTML and wrap the H1 in a div like so:

<div class="heading-wrap">
    <h1>{{post_title}}</h1>
</div>

Then add this CSS:

.heading-wrap h1 {
    display: inline-block;
    background-color: #000;
}

Note this also adds the background color as well – so no need to add it as an inline style.

[Jatin]

Perfect Thanks David.

[David]

You’re welcome

[Author]

Posts