Ethos - Insert Featured Image into content

Support
#1

Hi. I would like to move the post’s Featured Image into the content. It should be placed before the first paragraph and floated right. How do I do this in my child theme?

Thank you.

#2

Hello @SwissArmyKnife,

Thanks for writing in!

What you are looking to implement requires custom development which falls outside scope of the support we offer. But I can point you in right direction believing that it would be your responsibility to implement. Please note that custom code can present unexpected outcomes in future and it would be your responsibility to fix the same.

  1. First you need to copy content.php file from /wp-content/themes/x/framework/views/ethos/ to /wp-content/themes/x-child/framework/views/ethos/

  2. Next, you need to replace existing code with following:

    <?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();

    ?>

    > <?php x_get_view( 'ethos', '_content', 'post-header' ); ?> <?php if ( $is_index_featured_layout ) : ?> <?php x_ethos_featured_index(); ?> <?php else : ?> <?php if ( has_post_thumbnail() ) : ?>
    <?php if ( ! is_single() ) : ?> <?php x_ethos_featured_index(); ?> <?php else : ?> <?php x_featured_image(); ?> <?php endif; ?>
    <?php endif; ?>
    <?php x_get_view( 'global', '_content' ); ?>
    <?php endif; ?>

Then add following CSS under X > Launch > Options > CSS:

header.entry-header {
  height: 120px;
}

Thanks.

#3

Thank you for the rapid reply. Your solution is close, but not exactly what I am looking for. I do not want the Featured Image to appear in the header. I would like it to appear in the content. Here is an approximation of what the HTML should look like after the image is relocated:

<div class="entry-wrap">
	<div class="entry-content content">
	::before
	<img src="https://domain.com/wp-content/uploads/featured_image.jpg" alt="" width="300px" height="200px" style="float: right;">
	<p>This is the first paragraph of my post...</p>

Thank you.

#4

I found an answer: insert this code into functions.php:

// inserts Featured Image into the_content
add_filter( 'the_content', 'wpsites_featured_image_before_content' ); 
/**
 * @author    Brad Dalton
 * @example   http://wpsites.net/web-design/add-featured-image-before-content-in-any-theme/
 * @copyright 2014 WP Sites
 */
function wpsites_featured_image_before_content( $content ) { 
if ( is_singular('post') && has_post_thumbnail()) {
        $featuredimage = get_the_post_thumbnail(get_the_id(), 'full');
		
        $content = $featuredimage . $content;
		
		}

    return $content;
}

Then insert this into CSS:

.entry-thumb { display: none; }

img.wp-post-image { float: right; margin-left: 20px; }

You can see the result here: https://www.qa4erp.com/value-of-an-artifact/

I looked at a sampling of other pages on my site and I don’t believe I shot myself in the foot. Wish me luck…

#5

Glad to hear you got it sorted.

Cheers!