Looping through repeater subfields and displaying a specific value

• RihardsM

• November 30, 2020 at 2:14 am

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 and text part. Every grid item is meant to have an individual video sub-field, right now it’s hard-coded with an embed link.

This is how it’s meant to be:Link

So my question is – can I break the loop and only display the text and video that matches with the image I clicked, for example – I click on the fifth image, and only those values that I added to the fifth image are displaying.

Right now with the loop I have, it displays every single value.

PHP code:

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

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&modestbranding=1&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
    if (have_rows('inspiration-video')){
       while (have_rows('inspiration-video')) : the_row();
            $name1 = get_sub_field('name');
            $surname1 = get_sub_field('surname'); 
            echo '<h3 class="oswald-md2">'; 
              echo $name1, " " ,$surname1;
            echo '</h3>';   
       endwhile;
    }
    echo '</div>';
    echo '</div>';

Hope to get some advice.