Docs

[joenaab]

I’ve successfully created a full-width feature image that sits above both the article and sidebar of my blog posts. I’m trying now to place the post title and meta on top of the image. I found a great solution in the forum, except that its for a different stack. The answer in the link below is for Ethos, and I’m using Renew. Is there a way to do this same thing with Renew?

https://community.theme.co/forums/topic/featured-image-as-background-to-post-title/

Here’s the blog post that I’m testing with:

Vocal Training | Develop Awareness of Internal Sensation

You can see that, using a different suggestion in the forum, I was able to place the title over the image, but it’s not centered across the full-width and the meta is still below the image. Thanks.

[Rue Nel]

Hello There,

Thanks for writing in! Since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( has_post_thumbnail() ) : ?>
    <div class="entry-featured">
        <?php x_featured_image(); ?>
        <?php x_get_view( 'renew', '_content', 'post-header' ); ?>
    </div>
  <?php endif; ?>

  <div class="entry-wrap">
    <?php if( !is_single() || !has_post_thumbnail() ) x_get_view( 'renew', '_content', 'post-header' ); ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
</article>

3] Save the file named as content.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/renew/

Hope this helps. Please let us know how it goes.

[joenaab]

Thanks for this. Unfortunately, it’s not working as it does in the other suggestion from the forum thread that I linked to above. Further, this not only effects the image and title in the post page, it alters the thumbnail in the blog listing page, which I don’t want to effect in any way.

Is there a way to do this so that, a) the title and meta sit together over the image only in the single post page and not the blog listing page, and b) the title and meta are together and full-width across the image as in the example in the thread I posted to above?

[Christian]

Hey Joen,

Would you mind giving us access to your WordPress admin and FTP so we could take a closer look?

Thanks.

[joenaab]

Hey, I was able to find a solution, sort of, by editing another solution here in the forum that involved only CSS. However, it didn’t look so great and I’m spending too much time on this so I’ve gone back to not having a featured image at all on the single post and may return to this another day.

Thank you for taking time to assist. This was the solution I used that put the title halfway up the featured image and the post meta at the lower base of the image (in case anyone else is looking for this solution):

/* Added to overlay post title above featured image */
.single-post .entry-title {
  border-radius: 5px;
  position: relative;
  margin-top: -275px;
  z-index: 9999;
  margin-bottom: 30px;
  margin-left: 30px;
  background: rgba(65, 72, 77, 0.92);
  width: 140%;
  float: left;
  text-align: center;
  color: #fff;
  padding: 20px;
}

/* Added to overlay post meta above base of featured image */
.single-post .p-meta {
  border-radius: 5px;
  position: relative;
  margin-top: -70px;
  z-index: 9999;
  margin-bottom: 0px;
  margin-left: 30px;
  background: rgba(65, 72, 77, 1);
  width: auto;
  float: left;
  text-align: left;
  color: #fff;
  padding: 5px 20px 5px 20px;
}

[Christian]

Glad you’ve sorted it out.

[Author]

Posts