I've setup a loop for custom post type

enter image description here

// The Query
$the_query = new WP_Query( 'post_type=support_medewerkers&posts_per_page=1' );
// The Loop
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {

        echo '<div class="col-6 col-sm-6 col-md-3">';
            echo '<a href="'. get_the_permalink() . '">';
                echo '<div id="placeholder-support-blok">';
                    echo '<div class="hoek-img-support-blok">';
                        echo the_post_thumbnail ('full', array( 'class' => 'img-responsive, ' ), );
                        echo '<div class="support-text-blok">';
                            echo '<h4 class="support-blok-titel">'. get_the_title() .'</h4>';
                        echo '</div>';
                    echo '</div>';
                echo '</div>';
            echo '</a>';    
        echo '</div>';              
} else {
    // no posts found
/* Restore original Post Data */

Works perfect. The only thing that I need to fix is to setup the post_thumbnail as a background to place the image as fullwidth in the col-md-3 column. (see print screen). I cannot figure out or this can be done with css or with a echo background in the post_thumbnail.

  • Solved with: <div class="note avatar-image" style="background: url(<?php echo $url; ?>); background-size: cover; background-repeat: no-repeat; background-position: right; ">
    – Bouke
    Mar 25 '21 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.