How can I display my featured image correctly inside my single posts?

by

Here is what I have tried:

1) Added add_theme_support('post-thumbnails'); in functions.php.

2) Added <?php the_post_thumbnail(); ?> inside single.php which looks like this:

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>


        <div id="primary">



            <div id="content" role="main">

                    <?php the_post_thumbnail(); ?>
                <?php while ( have_posts() ) : the_post();  ?>
                    <?php get_template_part( 'content-single', get_post_format()  ); ?>

                <?php endwhile; // end of the loop. ?>

            </div>
        </div>

<?php get_footer(); ?>

My featured image is added but above the article and not inside the article, how it should be.

To get a better understanding, here’s a picture of the issue I’m having:enter image description here

How can I make that featured image appear below the “Test post” article? Like here for example:

Thank you in advance!

4 Answers
4

As mentioned by Rahil Wazir, take that code snippet <?php the_post_thumbnail(); ?> away from single.php.
Put following in your functions.php (at the bottom)

add_filter('the_content', 'put_thumbnail_in_posting');
function put_thumbnail_in_posting($content) {
global $post;
if ( has_post_thumbnail() && ( $post->post_type == 'post' ) ) { the_post_thumbnail( '', array( 'style' => 'float:left;margin:15px;' ) ); }
return $content;
}

Change the margin to whatever and/or add other css to it and you are done.
No need to put any in any other file.
(btw this way it floats in the left uppercorner next to your content, tested it with a “virgin” twentyeleven install.)

Addon:
If wished same on the pages change this part of code $post->post_type == 'post' into following $post->post_type == 'post' || 'page' .
If you want to make it a little more flexible and have the css code only in your style.css?
Change following part of code array( 'style' => 'float:left;margin:15px;'
into array( 'class' => 'thumbnail-layout' and add at the botttom of the style.php file a new class.
Use the same class name: (ofcourse you can change that name into you want, just be sure that in your function code and the style.css the same class must be used.

.thumbnail-layout { 
float:left;
display:inline;
margin:15px;
}

Ofcourse you can change margin if wished add padding if wished and so on. Good luck.

Leave a Comment