CODEWITHSUNDEEP
phpwordpress
Addzy
Addzy

Reputation: 674

Implementing Post Thumbnail from a Loop in functions.php

I'm using Ajax to load queried posts in to my page, I've got a function in my functions.php that helps implement this. It outposts the correct markup that the Posts should be in when they get loaded into the page.

The majority of it is working fine except the Post thumbnail.

I won't bore you with the query as I don't think you need it.

In the page template the first posts that get loaded in are in this markup and it 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 what I want to replicate in the functions.php, here is my code from the 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 this works perfectly, except the thumbnails are loading one after another vertically down the page, with the correct layout for everything else underneath it.

Here's a picture of the layout as set in the page template:enter image description here

And Here is what function loads into the page:

enter image description here

I've ried to give as much info as possible and think I'm missing somethig quite simple, I just cant see it.

Upvotes: 0

Views: 104

Answers (1)

rnevius
rnevius

Reputation: 27092

the_post_thumbnail() echoes the thumbnail. Since you're assigning the content to a variable, you need to use get_the_post_thumbnail(), which returns the thumbnail:

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

Upvotes: 1

Related Questions