Only loop through post if ACF field is filled - php

Question

I created a custom post type 'Team' which contains all our team members and some information for each person. I added a shortcode that renders a block with our Spotify-list and a picture of someone with headphones.
The picture is taken from the field 'team_foto_met_koptelefoon', but not everyone has this pictures set. I now want to loop only through the people (posts) that have a picture set in that field and ignore the others so everytime the page is reloaded, the Spotify-block is rendered but every time with a different picture.
I almost got it to work, but sometimes the block disappears, I think because he doesn't show the block if there is no picture set.
function dfib_team_spotify_shortcode( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'team',
'posts_per_page' => 1,
'order' => 'ASC',
'meta_key' => 'team_foto_met_koptelefoon',
'meta_value' => ' ',
'meta_compare' => '!=',
'orderby' => 'rand',
) );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<?php if( get_field('team_foto_met_koptelefoon') ): ?>
<div class="block__spotify">
<div class="block__spotify__inner" <?php if( get_field('team_foto_met_koptelefoon') ): ?> style="background-image: url(<?php the_field('team_foto_met_koptelefoon'); ?>);"<?php endif; ?>>
<h3 class="block__spotify--title">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
<g id="Group_1223" data-name="Group 1223" transform="translate(-1147 -1547.002)">
<g id="Group_1159" data-name="Group 1159" transform="translate(1147 1547.002)">
<path id="Path_779" data-name="Path 779" d="M59.555,188.083a30,30,0,1,0,30,30A30,30,0,0,0,59.555,188.083Zm13.758,43.27a1.869,1.869,0,0,1-2.571.622C63.7,227.67,54.83,226.7,44.388,229.083a1.869,1.869,0,0,1-.833-3.645c11.428-2.613,21.23-1.489,29.138,3.344A1.87,1.87,0,0,1,73.313,231.353Zm3.671-8.169a2.34,2.34,0,0,1-3.217.77c-8.062-4.956-20.356-6.391-29.894-3.5a2.338,2.338,0,1,1-1.36-4.475c10.9-3.306,24.441-1.705,33.7,3.986A2.339,2.339,0,0,1,76.984,223.184Zm.317-8.506c-9.67-5.743-25.621-6.271-34.853-3.469a2.806,2.806,0,1,1-1.629-5.37c10.6-3.217,28.213-2.6,39.346,4.013a2.806,2.806,0,0,1-2.864,4.826Z" transform="translate(-29.555 -188.083)" fill="#fff"/>
</g>
</g>
</svg>
luister naar</br> onze favoriete songs
</h3>
<div class="spotify--player">
<h2>#favoritetunes</h2>
<p>geniet van onze karaktervolle muzieklijst</p>
<iframe src="https://open.spotify.com/embed/playlist/6AZ1LZ8PKbkXkoBopPWDqM" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="spotify--img">
<?php if( get_field('team_foto_met_koptelefoon') ): ?>
<img src="<?php the_field('team_foto_met_koptelefoon'); ?>">
<?php endif; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php endwhile;
wp_reset_postdata(); ?>
<?php
$myvariable = ob_get_clean();
return $myvariable;
}
?>
<?php }

Answer 1

$args = array(
'post_type' => 'team',
'post_status' => 'publish',
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page' => -1,
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'team_foto_met_koptelefoon',
'compare' => 'EXISTS'
)
),
);
$team_foto_met_koptelefoon = get_posts($args);
_e("<pre>");
print_r($team_foto_met_koptelefoon); //Your posts
_e("</pre>");