3

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,
));
}
ch4rlie
  • 102
  • 2
  • 9
  • 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 May 29 '14 at 14:41
  • 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 May 29 '14 at 14:44
  • 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 May 29 '14 at 15:45

1 Answers1

3

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>
codescribblr
  • 1,146
  • 2
  • 11
  • 29
  • Thank you so much that is definitely the correct approach. Are you familar with the Flexible Content Add on? I think this may be the problem as even with your new code, its not building a full array of all of the "square_images" from every "images" repeater. Is this because there are 3 layouts in my flexible content field? Each layout has a repeater called images that we are pulling from, but it seems to only pull 1 from each layout type. Very strange, I was wondering if you had any insight into that and again thank you very much for your help – ch4rlie May 29 '14 at 18:41
  • I'm very familiar with the flexible content add-on. I use it almost every day. :) Please post the code that you're using to loop through the layouts. If you don't have any code yet for that, please post and export of your field groups using ACFs export functionality. That will give me everything I need to create the code to make this work. – codescribblr May 29 '14 at 21:51
  • i will post the export in the question, its really quite long! I think I know where I messed up by naming a layout 'images' then having a repeater inside called 'images' however you will know better than I once you review the export. Thank you for your expertise! – ch4rlie May 29 '14 at 22:21
  • Try this code again. I've updated the repeater code to use the new "have_rows()" functionality. I got it working on a test site. – codescribblr May 30 '14 at 16:51
  • That works great! If you dont mind what was casuing the problem, was it not using have_rows? Or was there some error in my logic? THanks - CHarlie – ch4rlie May 30 '14 at 19:35
  • Yes, you can't use "the_row()" with "get_sub_field()" call. You have to use "have_rows()". – codescribblr May 30 '14 at 20:08