Advanced Custom Fields - looping through repeater subfields and displaying a specific subfield attribute of each repeater field

Question

First of all, I know, I'm very average in PHP, I've echo'ed the whole HTML, it's awful, but that's not the case. So I'm trying to create an ACF block repeater. My goal is that I output a grid of images (cards), and when I click on any of them, a video displays on screen and below the video, a person's first and last name.

So what I've done so far is that I've successfully generated the grid, but I'm stuck on the video part. The video is displaying, but the text is not. Every grid item is meant to have an individual video, right now it's hard-coded with an embed link.

This is how it's meant to be: link

As I couldn't figure out a way to get the $row elements from the foreach loop, I tried defining them in the beginning of the code, but without a loop, it's not gonna display anything.

I hope to get some advice for a loop or some other solution to display each grid item's individual video and text.

The PHP code:

<?php 
$rows = get_field('video');

//Not sure if this is necessary
$name1 = get_sub_field('name');
$surname1 = get_sub_field('surname');

if( $rows ) {
    echo '<div class="grid">';
    foreach( $rows as $row ) {
        $image = $row['thumbnail'];
        $name = $row['name'];
        $surname = $row['surname'];
        $numberoforder = $row['number'];
        $class = $row['additionalclass'];
        echo '<div class="img ',$class,'" onclick="openVideo()">';
            echo '<div class="name oswald-regular"><p>',$name, '<br>' ,$surname, '</p></div>';
            echo '<img src=',$image,'>';
            echo '<div class="number-of-order oswald-md2"><p>',$numberoforder,'</p></div>';
        echo '</div>';
    }
    echo '</div>';
    echo '<div class="show-more-btn">';
    echo '<input value="Show more" id="btn" type="button" class="button" onclick="displayStories()">';
    echo '</div>';
    echo '<div class="personal-video" id="personal-video">';
    echo '<div class="video-container">';
    echo '<div class="closeBtn"><img src="/wordpress/wp-content/uploads/2020/11/close2.png" alt="Close" onclick="closeVideo()"/></div>';
    echo '<iframe width="560" height="415" src="https://www.youtube.com/embed/1PalAURGxtM?rel=0&amp;modestbranding=1&amp;controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video1" onclick="playPause()"></iframe>'; //I'd want to display an individual video for each element also
        echo '<h3 class="oswald-md2">'; 
             echo $name1, " " ,$surname1; //This is what I'm struggling with - displaying the info
        echo '</h3>';   
    echo '</div>';
    echo '</div>';
    
}

Thanks in advance.

Answer 1

get_sub_field only works within a loop of a repeater or flexible content field. To use it properly, within your $rows loop, you need to call the function the_row:

if (have_rows('video') {
    while (have_rows('video')) : the_row();
      $name = get_sub_field('name');
      // other code
    endwhile;
}

More info here: https://www.advancedcustomfields.com/resources/get_sub_field/