Any advice: how to place the post title on top of the future image

Home Forums Modern Any advice: how to place the post title on top of the future image

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18472

    elvisf
    Participant

    Any advice: how to place the post title on top of the future image

    Resolved

    Right now I’m trying to place the single post title on top of the future post image, but is not working for me. Do you have any way to do it? I have upload 2 attachment, one has the title below the post future image, and the other one has the title on top of the future image. I was able to do it on the inspect mode, but I’m not able to change it on the php files.
    THANKS for any help.

    #18482

    Oliver Juhas
    Keymaster

    Hi elvisf,

    If I understand correctly from your screenshot, you are trying to display the post title as overlay of the post featured image on single post page only.

    The easiest way to do this would be using custom CSS:

    .is-singular .entry,
    .is-singular .entry-media {
    	position: relative;
    }
    
    .is-singular .entry-media + .entry-content-container .entry-header {
    	position: absolute;
    	width: 100%;
    	left: 0;
    	top: 6%;
    	margin: 0;
    	text-align: center;
    }
    
    .is-singular .entry-media + .entry-content-container .entry-title {
    	color: #fff;
    }
    
    .is-singular .entry-media::after {
    	content: '';
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	left: 0;
    	top: 0;
    	background: #000;
    	opacity: .6;
    }

    But surely, this code will not allow you to precisely position the title in regards to the featured image. To be able to control that, you will need to add the post title into featured image container and then position it with your custom CSS.
    To add post title as custom HTML into featured image you can use WordPress’ native post_thumbnail_html filter hook in your child theme‘s functions.php file, something like:

    function child_theme_post_title_in_featured_image( $html ) {
      if ( is_single() ) {
        $html .= '<span class="entry-media-title">' . get_the_title() . '</span>';
      }
      return $html;
    }
    add_action( 'post_thumbnail_html', 'child_theme_post_title_in_featured_image' );

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.