Here’s what I am trying to achieve: I want the featured image of posts to appear as background to the post title. Much like http://markmanson.net/artist-entrepreneur or http://tdeditordemo.wordpress.com/2014/06/10/reasons-for-traveling/

Having researched the knowledge base and the forum, I have come to the conclusion that this is not a feature of the theme. So i found this code (see below) that supposedly should do what I want, but I have no idea where to put it. Adding it to header.php doesn’t do anything. I am developing on XAMPP locally, so unfortunately I cannot link to my site. I am using the Ethos stack.

<?php

if (has_post_thumbnail()) { //if a thumbnail has been set

$imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
$featuredImage = wp_get_attachment_image_src($imgID, ‘full’ );//get the url of the featured image (returns an array)
$imgURL = $featuredImage[0]; //get the url of the image out of the array

?>
<style type=”text/css”>

.header-image {
border:none;
color:black;
background-image: url(<?php echo $imgURL ?>);

}

</style>

<?php
}//end if

?>

Thanks for posting in.

This code may not work on X existing layout, and we can’t support applying this as. But I could help you with different workaround.

First, setup a sample post with big featured image, and our goal is to finish it something like this.

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

1. Add this css at your customizer’s custom css under Admin > Appearance.

.single .has-post-thumbnail .entry-featured {
position: relative;
}
.single .has-post-thumbnail .entry-featured .entry-header {
position: absolute;
z-index: 99;
top: 45%;
width: 100%;
padding: 20px;
background-color: rgba(255, 255, 255, 0.35);
}

2. Create a file named content.php at your child theme (eg. wp-content ▸ themes ▸ x-child-ethos ▸ framework ▸ views ▸ ethos )

3. Edit your child theme’s content.php and add this code replacing everything.

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout',  true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_ethos_featured_index(); ?>
  <?php else : ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php if ( ! is_single() ) : ?>
          <?php x_ethos_featured_index(); ?>
        <?php else : ?>
          <?php x_featured_image(); ?>
          <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
        <?php endif; ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php if( !is_single() || !has_post_thumbnail() ) x_get_view( 'ethos', '_content', 'post-header' ); ?>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  <?php endif; ?>
</article>

4. Save and upload.

Hope this helps 🙂

Thank you so much for all the help!

Kind regards, Tristan

What would this PHP code look like for the Integrity Light child theme? Replacing ‘ethos’ for ‘Integrity’ doesn’t do the trick 🙁

Thanks again!

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

Thank you.

thank you,

since the principles above works for your site, we can use also follow that for Integrity,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

1. Add this css at your customizer’s custom css under Admin > Appearance.

.single .has-post-thumbnail .entry-featured {
position: relative;
}

.single .has-post-thumbnail .entry-featured .entry-header {
	font-size: 14px;
	position: absolute;
	top: 45%;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.35);
	padding: 20px;
}

2. Create a file named content.php at your child theme (eg. wp-content ▸ themes ▸ x-child-integrity-light ▸ framework ▸ views ▸ integrity )

3. Edit your child theme’s content.php and add this code replacing everything.

<?php

// =============================================================================
// VIEWS/INTEGRITY/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Integrity.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-featured">
    <?php x_featured_image(); ?>
    <?php x_get_view( 'integrity', '_content', 'post-header' ); ?>
  </div>
  <div class="entry-wrap">
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
  <?php x_get_view( 'integrity', '_content', 'post-footer' ); ?>
</article>

4. Save and upload.

hope this also works for your site.