ACF - Looping thru posts, then thru flexible content, then thru repeater - php

Question

What I am trying to do is get images from a repeater field and fill my homepage with images that lead to posts.
This is usually easy for me but the catch here is that there are multiple images for each post in a repeater field, which are in a flexible content field of the advanced custom fields plugin.
The goal is to have an unlimited amount of images coming from the 'square_image' field in completely random order on the homepage that lead to their particular post. So with 15 posts that each have 15 'square_images' there would be 225 images on the homepage in completely random placement linking to their respective posts.
I am wondering if I need to build an array inside the while loops so that I can get that ultimate random order at the end, instead of just the first 15 images from post 1 in random order, and then the next 15 images from post 2 in a random order which is not what i am trying to do.
<?php get_header(); /* Template Name: Homepage Looper */ ?>
<div id="homepage">
<?php
// the query
$args = array(
'post_type' => 'projects',
'posts_per_page' => '-1',
'orderby' => 'rand',
);
$the_query = new WP_Query( $args );$count = 1; ?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="row">
<!-- the loop -->
<?php
while ( $the_query->have_posts() ) : $the_query->the_post();
if( have_rows('the_page_content') ):
while ( have_rows('the_page_content') ) : the_row();
if(get_sub_field('images')) :
while(has_sub_field('images')) : the_row();
?>
<?php
$image = get_sub_field('square_image');
if ( !empty($image) ):
// vars
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
?>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder">
<a href="<?php the_permalink(); ?>" rel="<?php the_title(); ?>">
<img src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" class="img-responsive home-tile" />
<span class="title"><?php the_title(); ?><br><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/magnify.png"></span>
</a>
</div>
<?php endif; ?>
<?php
if($count % 6 == 0) {echo '</div><div class="row">';}
$count++;
?>
<?php
endwhile; // while(has_sub_field('images')
endif; // get_sub_field('images')
endwhile; // have_rows('the_page_content')
endif; // have_rows('the_page_content')
endwhile; // $the_query->have_posts ?>
<!-- end of the loop -->
</div>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; // $the_query->have_posts ?>
</div>
<div id="single_project" style="position: absolute; margin-left:100%; width:100%;">
</div>
<?php get_footer(); ?>
THE ACF EXPORT IS BELOW
if(function_exists("register_field_group"))
{
register_field_group(array (
'id' => 'acf_project-fields',
'title' => 'Project Fields',
'fields' => array (
array (
'key' => 'field_534efd890cd30',
'label' => 'Hero Image',
'name' => 'hero_image',
'type' => 'image',
'instructions' => 'Upload the large version for this post that will be used as the hero image on the top of the page.',
'save_format' => 'url',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_534efdb70cd31',
'label' => 'Page Content',
'name' => 'the_page_content',
'type' => 'flexible_content',
'instructions' => 'Build out the content for this project.',
'layouts' => array (
array (
'label' => 'Image Row',
'name' => 'image_row',
'display' => 'row',
'min' => '',
'max' => '',
'sub_fields' => array (
array (
'key' => 'field_534efdea0cd32',
'label' => 'Images',
'name' => 'images',
'type' => 'repeater',
'column_width' => '',
'sub_fields' => array (
array (
'key' => 'field_53716523cfc52',
'label' => 'Square Image',
'name' => 'square_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_53716532cfc53',
'label' => 'Full Size Image',
'name' => 'full_size_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
),
'row_min' => 1,
'row_limit' => 6,
'layout' => 'table',
'button_label' => 'Add Image Set',
),
),
),
array (
'label' => 'Text + Images',
'name' => 'text_images',
'display' => 'row',
'min' => '',
'max' => '',
'sub_fields' => array (
array (
'key' => 'field_5356d3a6a8ac9',
'label' => 'Title',
'name' => 'title',
'type' => 'text',
'instructions' => 'Enter in the title of this project if you wish for it to show above the text.',
'column_width' => '',
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'formatting' => 'html',
'maxlength' => '',
),
array (
'key' => 'field_534eff4ae5d31',
'label' => 'Text Content',
'name' => 'text_content',
'type' => 'wysiwyg',
'column_width' => '',
'default_value' => '',
'toolbar' => 'full',
'media_upload' => 'yes',
),
array (
'key' => 'field_534eff32e5d30',
'label' => 'Images',
'name' => 'images',
'type' => 'repeater',
'column_width' => '',
'sub_fields' => array (
array (
'key' => 'field_53716549cfc54',
'label' => 'Square Image',
'name' => 'square_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_53716557cfc55',
'label' => 'Full Size Image',
'name' => 'full_size_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
),
'row_min' => '',
'row_limit' => 3,
'layout' => 'table',
'button_label' => 'Add Image Set',
),
),
),
array (
'label' => 'Images + Text',
'name' => 'images_text',
'display' => 'row',
'min' => '',
'max' => '',
'sub_fields' => array (
array (
'key' => 'field_534effafb045d',
'label' => 'Images',
'name' => 'images',
'type' => 'repeater',
'column_width' => '',
'sub_fields' => array (
array (
'key' => 'field_53716567cfc56',
'label' => 'Square Image',
'name' => 'square_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
array (
'key' => 'field_53716576cfc57',
'label' => 'Full Size Image',
'name' => 'full_size_image',
'type' => 'image',
'column_width' => '',
'save_format' => 'object',
'preview_size' => 'thumbnail',
'library' => 'all',
),
),
'row_min' => '',
'row_limit' => 3,
'layout' => 'table',
'button_label' => 'Add Image Set',
),
array (
'key' => 'field_5356d3dba8aca',
'label' => 'Title',
'name' => 'title',
'type' => 'text',
'instructions' => 'Enter in the title of this project if you wish for it to show above the text.',
'column_width' => '',
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'formatting' => 'html',
'maxlength' => '',
),
array (
'key' => 'field_534effafb045c',
'label' => 'Text Content',
'name' => 'text_content',
'type' => 'textarea',
'column_width' => '',
'default_value' => '',
'placeholder' => '',
'maxlength' => '',
'rows' => '',
'formatting' => 'br',
),
),
),
),
'button_label' => 'Add Row',
'min' => '',
'max' => '',
),
),
'location' => array (
array (
array (
'param' => 'post_type',
'operator' => '==',
'value' => 'projects',
'order_no' => 0,
'group_no' => 0,
),
),
),
'options' => array (
'position' => 'normal',
'layout' => 'no_box',
'hide_on_screen' => array (
0 => 'the_content',
1 => 'excerpt',
2 => 'custom_fields',
3 => 'discussion',
4 => 'comments',
5 => 'format',
6 => 'featured_image',
7 => 'send-trackbacks',
),
),
'menu_order' => 0,
));
}

Answer 1

Create an array of the images during the initial posts loop, randomize that array, then output the html in a loop through the images array.
<?php
$args = array(
'post_type' => 'projects',
'posts_per_page' => '-1',
'orderby' => 'rand',
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
$images = array();
while ( $the_query->have_posts() ) : $the_query->the_post();
if( have_rows('the_page_content') ):
while ( have_rows('the_page_content') ) : the_row();
if( have_rows('images') ) :
while( have_rows('images') ) : the_row();
$image = get_sub_field('square_image');
if ( !empty($image) ):
// add image properties and related data to main images array
$images[] = array(
'url' => $image['url'],
'title' => $image['title'],
'alt' => $image['alt'],
'postdata' => array(
'id' => get_the_ID(),
'title' => get_the_title(),
'permalink' => get_permalink()
)
);
endif;
endwhile; // while(have_rows('images'))
endif; // have_rows('images')
endwhile; // have_rows('the_page_content')
endif; // have_rows('the_page_content')
endwhile; // $the_query->have_posts
wp_reset_postdata();
endif; // $the_query->have_posts
// Loop through the images array and output html for each image
shuffle($images); // Randomize the order of the images
$count = 1;
foreach($images as $img) :
?>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder">
<a href="<?php echo $img['postdata']['permalink']; ?>" rel="<?php echo $img['postdata']['title']; ?>">
<img src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt']; ?>" class="img-responsive home-tile" />
<span class="title"><?php $img['postdata']['title']; ?><br><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/magnify.png"></span>
</a>
</div>
<?php if($count % 6 == 0) echo '</div><div class="row">';?>
<?php $count++; ?>
<?php endforeach; ?>
</div>