Display WordPress-ACF value from a user profile in frontend

Question

I want to create a page with all the user profiles, but i only want to display the images they defined in the Advanced Custom Fields on their user profiles.

I tried to do something like this:

<?php if (is_page(9)){ ?>   
<section class="pageContent contentWidth">
<ul class="profilePictures">
<?php
    $blogusers = get_users('orderby=nicename&role=subscriber');
    foreach ($blogusers as $user) {
        echo '<li><div class="image_wrapper"><img class="profile1" src="';
        $user->the_field('profilbild');
        echo '"/></div><img class="profile2 hoverShow" src="';
        $user->the_field('funbild');
        echo '"/><div class="imageOverlay"><p>';
        $user->the_field('nickname');
        echo '</p></div></li>';
    }
?>
</ul>
</section>
<?php } ?>

But what i'm getting in frontend is only:

<section class="pageContent contentWidth">
<ul class="profilePictures">
<li><div class="image_wrapper"><img class="profile1" src="

and then it ends.

Edit: The error is:

Fatal error: Call to undefined method WP_User::the_field() in .../index.php on line 208

This is the line of

$user->the_field('profilbild');

So I seems like I can't call this method from there. But how can I do it then?

Edit2: So I found the solution for the method not found error. I'm just echoing out the shortcodes for the fields now:

echo '<li><div class="image_wrapper"><img class="profile1" src="
[acf field="profilbild"]
"/></div><img class="profile2 hoverShow" src="
[acf field="funbild"]
"/><div class="imageOverlay"><p>
[acf field="nickname"]
</p></div></li>';

But it fails at locating the right user I think. ACF doesn't know which user to go to.

What would be a solution for this?

Answer 1

The solution was the following:

$image1 = get_field('profilbild', $user);
$image2 = get_field('funbild', $user);
$name = get_field('nickname', $user);
echo '<li><div class="image_wrapper"><img class="profile1" src="';
echo $image1['url'];
echo '"/></div><img class="profile2 hoverShow" src="';
echo $image2['url'];
echo '"/><div class="imageOverlay"><p>';
echo "$name";
echo '</p></div></li>';

I hope this will help!