WordPress ACF Random image from Repeaterfield

Question

I have created a repeater field called: "random_images". It contains the subfields: "random photo one" (to five)

One random image at the time from these five should be displayed on my front-end. The images should change accordingly: When the page loads, one random image should be displayed. After a couple of seconds, the image should change to another.

How do I do it?

I am new to ACF and PHP. This is what I have come up with so far:

 if (get_row_layout() == 'random_images') {

            $rows = get_sub_field('random_images'); 
            $rand_row_image = array_rand($random_images, 1); 
            $image = wp_get_attachment_image_src($rand_image, 'full');
          
        }

Answer 1

I'm going to assume you have a repeater field called random_images that has a repeatable subfield (image field) called image, so, when you go to your post editor (or wherever you place the repeatable field), you can repeat the image field as many times as you want and put as many images as you want there.

Then, if you put your code in single.php (or you template parts or other template files), you can do this:

<?php
    // ... template code already there
    
    $random_images = get_field('random_images');
    //The line below will mix the array randomly, so you always pick a random element from it
    shuffle($random_images);
    $random_img_url = $random_imges[0]['image']['url'];
?>

Note: How to get the URL might change depending on how you configured your fields when you created them, but that is the idea.

Note: If you want to use get_field() outside the loop, you are going to have to use the post id in this way get_field('random_images', $post_id);

The code above will give you one of the images you placed in the repeater field, so now you can render that image in you page or post, and the image will be different in every page load.

    <img src="<?php echo $random_img_url; ?>" />

To this point, you used PHP to render a random image but with PHP you can't change the image after the page is loaded, so you will have to use jQuery for that (you can use vanilla JavaScript but to make things easy I will explain this with jQuery).

If you don't have a custom file to put JS code in the theme you are developing, then you will have to create a file called custom.js or whatever name you want to give it, and then enqueue that file with wp_enqueue_script. I will not explain more of this because it is not directly related to the question.

Now you have your custom.js file, but you will need a way to get the other image URLs from the page with your random images, so, to achieve that, you can do the following just where we left the php code above.

<?php
    $rand_imgs_urls = [];
    foreach($random_images as $image) {
        $rand_imgs_urls[] = $image['image']['url'];
    }
// Now, instead of the <img /> tag we used above, we will use this
?>
<div class="random-img" data-images="<?php echo json_encode($rand_imgs_urls); ?>">
    <img src="<?php echo $rand_imgs_urls[0]; ?>" />
</div>

Once you rendered the image, now you can use jQuery to get the images placed in the data-images attribute of the div above, and change the image src every few seconds. So, in the custom.js file you can put something like this:

jQuery(document).ready(function($) {
    var images = JSON.parse($('.random-img').data('images'));
    var randomImage = images[Math.floor(Math.random()*images.length)];
    setInterval(function(){ $('.random-img img').attr('src', randomImage); }, 5000);
});

With that you will have the image changing every 5 seconds.