Incorrect positioning of the featured image when using the_post_thumbnail() in WordPress

1 Views

I’m a bit of a newby at this, but I’m trying to create a wordpress function for displaying snippets from the latest 4 post on a page with a shortcode. The idea is to have 4 panels, each showing the post title, featured image, and excerpt. I can get all these elements to appear on the page. However, the images are always inserted above the rest of the content. The code for the function is: 

function recent_posts_function($atts){
    extract(shortcode_atts(array(
    'posts' => 1,
    ), $atts));

    $return_string = '<h2>Recent Projects</h2><div>';
    query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
    if (have_posts()) :
        while (have_posts()) : the_post();
            $return_string .= '<div class="portfolio-posts"><h4><a href="'.get_permalink().'">'.get_the_title().'</a></h4>'.get_the_excerpt().'<a href="'.get_permalink().'" title="'.get_the_title().'">'.the_post_thumbnail('medium').'</a></div>';
        endwhile;
    endif;
    $return_string .= '</div>';

    wp_reset_query();
    return $return_string;
}

The code this retuns places the images first, and the the rest of the content thus:

Read More
<div class="entry-content">
    <img src="http://URL.com/image1.jpg" class="attachment-medium wp-post-image" alt="alt text 1">
    <img src="http://URL.com/image2.jpg" class="attachment-medium wp-post-image" alt="alt text 2">
    <h2>Recent Posts</h2>
    <div>
        <div class="portfolio-posts">
            <h4><a href="http://www.URL.com/category/post-title-1/">Post Title 1</a></h4>
            <p class="lead">excerpt text from post goes here</p>
            <p class="more-link-p"><a class="btn btn-danger" href="http://www.URL.com/category/post-title-1/">Read more →</a></p>
            <a href="http://www.URL.com/category/post-title-1/" title="Post Title 1"></a>
        </div>
        <div class="portfolio-posts">
            <h4><a href="http://www.URL.com/category/post-title-2/">Post Title 2</a></h4>
            <p class="lead">excerpt text from post 2 goes here</p>
            <p class="more-link-p"><a class="btn btn-danger" href="http://www.URL.com/category/post-title-2/">Read more →</a></p>
            <a href="http://www.URL.com/category/post-title-2/" title="Post Title 2"></a>
        </div>
    </div>
</div>

The question is how can I get the image to display below the title, and before the excerpt text? Any help would be very much appreciated!

Thank you…

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. So, I remember running into this issue myself a while back. Turns out the_post_thumbnail is a “dump” of what’s requested. What you need is something that you can echo out or store in a variable for later use.

    The solution to this is get_the_post_thumbnail – check out the link

    From this, you will be able to echo out or store it inside a variable for later use, instead of it just being harshly dumped like some sort of brute.

    Happy coding!