[Resolved] Post Title and Meta Over Featured Image

Home Forums Support Post Title and Meta Over Featured Image

  • This topic has 12 replies, 3 voices, and was last updated 5 months ago by David.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1466168
    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.

    #1466284
    Elvin
    Staff
    Customer Support

    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.:)

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

    #1466519
    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?

    #1466664
    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.

    #1466917
    David
    Staff
    Customer Support

    Hi there,

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

    #1467043
    Jatin

    Site link

    #1467560
    David
    Staff
    Customer Support

    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;
    } );
    #1467932
    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]

    #1468224
    Elvin
    Staff
    Customer Support

    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

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

    #1468572
    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.

    #1468847
    David
    Staff
    Customer Support

    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.

    #1468880
    Jatin

    Perfect Thanks David.

    #1469004
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.