title: PHP outputs images before divs - wordpress bootstrap carousel multiple items
body: <p>I'm trying to create a wordpress slider with bootstrap carousel displaying multiple post on one slide. I have a problem with outputting the images in the <code>&lt;div class=&quot;col-xxl-4&quot;&gt;</code>.</p>
  <p>This is my code:</p>
  <pre><code>&lt;div class=&quot;header-slider&quot;&gt;
  
    &lt;div class=&quot;carousel slide carousel-fade&quot; data-bs-ride=&quot;carousel&quot;&gt;
  
      &lt;div class=&quot;carousel-inner&quot;&gt;
        &lt;?php
  
          // Item size (set here the number of posts for each group)
          $i = 3;
  
          global $post;
  
          $args = array(
            'post_type' =&gt; 'slider',
            'posts_per_page' =&gt; -1,
            'orderby' =&gt; 'date',
            'order' =&gt; 'DESC',
          );
  
          $myposts = get_posts($args);
  
          if($myposts):
  
            $chunks = array_chunk($myposts, $i);
            $html = &quot;&quot;;
  
            foreach($chunks as $chunk):
  
            ($chunk === reset($chunks)) ? $active = &quot;active&quot; : $active = &quot;&quot;;
            $html .= '&lt;div class=&quot;slider__slide carousel-item&quot;&gt;&lt;div class=&quot;row&quot;&gt;';
  
            foreach($chunk as $post):
  
              $html .= '&lt;div class=&quot;col-xxl-4&quot;&gt;';
                $html .= the_post_thumbnail($post-&gt;ID);
              $html .= '&lt;/div&gt;';
  
            endforeach;
  
            $html .= '&lt;/div&gt;&lt;/div&gt;';
  
          endforeach;
  
          echo $html;
  
         endif;
        ?&gt;
      &lt;/div&gt;&lt;!-- .carousel-inner --&gt;
    &lt;/div&gt;&lt;!-- .carousel --&gt;
  
  
  &lt;/div&gt;&lt;!-- .header-slider --&gt;
  </code></pre>
  <p>and this the output I get:
  <a href="https://i.stack.imgur.com/QSMgU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QSMgU.png" alt="enter image description here" /></a></p>
  <p>how can I fix this to get:
  <code>&lt;div class=&quot;col-xxl-4&quot;&gt;&lt;img src=&quot;...&quot;&gt;&lt;/div&gt;</code></p>