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

1 Views

Here is what I have tried:

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

Read More

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!

Post Views: 1

Related posts

4 comments

  1. 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.

  2. As Rahil has said in the comments, you will need to add the the_post_thumbnail(); block to the content-single.php:

            <div class="entry-content">

if ( has_post_thumbnail() ) {
    the_post_thumbnail();
} 
            <?php the_content(); ?>
            <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
        </div><!-- .entry-content -->

    You may also need to style the thumbnail to display:inline; and float:left; in the css file to get it to display properly.

  3. According to wordpress codex the_post_thumbnail() function must be called in between the loop see link the_post_thumbnail so move “the_post_thumbnail()” into content-single template to get proper placement of the image.

  4. Tested on Twenty Twelve child theme.

    Here’s another way to add a featured image to single posts and style it from your child themes style.css file.

    This method also links the Post Thumbnail to the Post Permalink.

    This PHP code goes at the end of your child themes functions.php file.

    add_filter( 'the_content', 'single_post_featured_image' );

function single_post_featured_image($content) {

global $post;

if ( is_singular( 'post' ) && has_post_thumbnail() ) {  

the_post_thumbnail( '', array( 'class' => 'post-image' ) ); 

printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute(  

    'echo=0' ), $img ); 

}

return $content;


}

    Here’s some sample CSS code:

    .single .post-image {
float:left; 
margin: 20px 20px 0 0;
width: 200px;
height: 200px;
}

    You could also add support for a featured image in your child themes functions file but probably better to crop/resize each manually before adding:

    //* Add new image sizes
add_image_size( 'post-image', 200, 200, true );

    Source http://wpsites.net/web-design/display-featured-image-before-or-after-entry-title-on-single-posts-pages/

Comments are closed.