PHP outputting in wrong place using .=

Question

I'm struggling to see why the .= operator is outputting my code above where I want it. It should be between the list element.

Here is the PHP

<?php 
    function tcc_display_carousel() {

        $reval  = '<div id="tcc_carousel">';
        $reval .= '<ul class="bjqs">';

        $args = array('post__not_in' => array(133), 
                      'post_type' => 'tcc_carousel', 
                      'posts_per_page' => ''. $tcc_ppp .'', 
                      'order' => 'ASC');

        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) : 
            while (  $loop->have_posts() ) :  
                $loop->the_post(); 

                $reval .= '<li>';
                $reval .= the_post_thumbnail('tcc-thumbnail');
                $reval .= '</li>';
                //No post displays
            endwhile; 
        else:
            $reval .= '<h2>No posts to display</h2>';
        endif;

        $reval .=  '</ul>';
        $reval .=  '</div>';
        return $reval;  
    }
?>

& here is the html it outputs:

<img class="attachment-tcc-thumbnail wp-post-image" width="882" height="292" alt="01"  src="http://dcs.dev/wp-content/uploads/2013/08/01.png">
<div id="tcc_carousel">
    <ul class="bjqs">
      <li></li>
      </ul>
</div>
</div>

I've experimented and i'm guessing it's something to do with the query in between it, but i'd not know how to add to the $reval to the query.

i'm building a plugin for wordpress so thats the reason i have it in a function.

Answer 1

the_post_thumbnail does not return but echos it out itself

you could use output buffering to capture it if you need to manipulate it

$reval .= '<li>';
ob_start()
   the_post_thumbnail('tcc-thumbnail');
   $thumb = ob_get_contents();
ob_end_clean;
$reval .= $thumb;
$reval .= '</li>';

or as dev-null-dweller mentions you can use get_the_post_thumbnail(null, 'tcc-thumbnail');

$reval .= '<li>';
$reval .= get_the_post_thumbnail(null, 'tcc-thumbnail');
$reval .= '</li>';

Answer 2

It's probably got something to do with one of the WordPress functions trying to echo a value from a function.

Try doing something like this

function tcc_display_carousel_obj() {
    ob_start();
    tcc_display_carousel();
    $output=ob_get_contents();
    ob_end_clean();
    return $output;
}

Then call your carousel using tcc_display_carousel_obj instead