Random images from ACF Options Gallery in Bricks

This Pro tutorial provides the steps to output images from an ACF Gallery-type custom field in a Bricks query loop randomly with each image appearing only once with the remaining filled by a fallback image.

We shall use PHP sessions to ensure that any given image from the gallery is used only once.

Options page:

Options page field group:

Gallery field populated with images:

After implementing the tutorial:

Step 1

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

// Function to return ID of a random image from ACF Gallery-type custom field called "event_gallery" attached to an options page.
function bl_get_random_event_image() {
    // Get the images from the ACF gallery field
    $images = get_field( 'event_gallery', 'option' );

    // Get a random image from the array
    $random_image = $images[ array_rand( $images ) ];

    // Return the ID of the random image
    return $random_image[ 'ID' ];
}

Replace event_gallery with the field name of your gallery-type field.

Step 2

Edit your Page/Template where you’d like to have or already have a query loop set up.

Add an Image element and set its source to:

{echo:bl_get_random_event_image}

Reload the page on the front end and you should see the images appearing randomly. If you don’t mind images appearing more than once, you don’t need to continue with the next step.

Step 3

To ensure that each image will only be output once and any other slots filled by a specific fallback image, replace the PHP with:

function bl_get_random_event_image() {
    // Start the session if not already started
    if ( ! session_id() ) {
        session_start();
    }

    // Get the images from the ACF gallery field
    $images = get_field( 'events_gallery', 'option' );

    // Define the fallback image ID
    $fallback_image_id = 39;

    if ( ! $images ) {
        return $fallback_image_id; // Return fallback image ID if no images are found
    }

    // Initialize or retrieve the session variable to keep track of shown images
    if ( ! isset( $_SESSION['shown_images'] ) ) {
        $_SESSION['shown_images'] = [];
    }

    // Filter out images that have already been shown
    $unshown_images = array_filter( $images, function( $image ) {
        return ! in_array( $image['ID'], $_SESSION['shown_images'], true );
    } );

    // If all images have been shown or there are not enough unique images, use the fallback image
    if ( empty( $unshown_images ) ) {
        // Optionally, you can reset the shown images if you want to start over
        // $_SESSION['shown_images'] = []; // Uncomment this line if you want to reset the cycle
        return $fallback_image_id;
    }

    // Get a random image from the array of unshown images
    $random_image = $unshown_images[ array_rand( $unshown_images ) ];

    // Add the ID of the random image to the session to avoid showing it again
    $_SESSION['shown_images'][] = $random_image['ID'];

    // Return the ID of the random image
    return $random_image['ID'];
}

Replace event_gallery with the field name of your gallery-type field.

Replace 39 with the ID of your desired fallback image.