wordpress - Implementing Post Thumbnail from a Loop in functions.php -

i'm using ajax load queried posts in page, i've got function in functions.php helps implement this. outposts correct markup posts should in when loaded page.

the majority of working fine except post thumbnail.

i won't bore query don't think need it.

in page template first posts loaded in in markup , works perfectly:

<div class="small-12 large-3 columns end thumb">             <div class="grid">             <figure class="effect-zoe">                 <?php the_post_thumbnail( $size, $attr ); ?>                 <figcaption>                     <h2><?php the_title(); ?></h2>                     <hr class="light">                     <p class="description"><?php the_content(); ?></p>                 </figcaption>                        </figure>         </div>   </div> 

this want replicate in functions.php, here code functions file:

$out .= '<div class="small-12 large-3 columns end">                     <div class="grid">                         <figure class="effect-zoe">                             '.the_post_thumbnail( $size, $attr ).'                             <figcaption>                                     <h1>'.get_the_title().'</h1>                                 <p>'.get_the_content().'</p>                             </figcaption>                                    </figure>                     </div>                 </div>'; 

all of works perfectly, except thumbnails loading 1 after vertically down page, correct layout else underneath it.

here's picture of layout set in page template:

and here function loads page:

i've ried give info possible , think i'm missing somethig quite simple, cant see it.

the_post_thumbnail() echoes thumbnail. since you're assigning content variable, need use get_the_post_thumbnail(), returns thumbnail:

<figure class="effect-zoe">     '.get_the_post_thumbnail( get_the_id(), $size, $attr ).'         <figcaption>