3
votes

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,
));
}
1
I don't see the code for the flexible layout anywhere in your post. Is that part really relevant to your question? or do you not need that to answer the question?codescribblr
From looking at the rest of your code, it appears the best way to accomplish the random output of all posts would be to create an array of all of the post data and then randomize the array. You can't just create an array of posts and randomize that, because you'd still end up with the same problem you have now. You'll need to create an array of just the output data and then randomize that array before printing. If this is what you're looking for, I can write up some code in an answer that would do that. I just didn't want to write it up if that's not what you wanted.codescribblr
Yeah you are exactly right. The flexible content types come in to play on the actual template to display the posts, however since they are mixed up in it, I thought it may be relevant. You are right, I think I am over complicating this could I see what you were thinking for this, I would really appreciate your help!ch4rlie

1 Answers

3
votes

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>