Post Object Loop with Infinite Scroll

• fatosv

• August 26, 2015 at 11:45 pm

I’ve been having an issue lately with the Post Object in a Field Content loop. What I’ve been trying to do is create post objects based on a certain type of layouts. In order to do so I’ve created conditional loops which would be shown in the homepage based on the number of posts. Now, what I’m trying to do is use this loop in accordance with Infinite Scroll and create the Infinite Scroll effect that Instagram uses. However, I’m struggling to come to a conclusion due to the idea of how to call the projects since they’re post objects and on the other hand I can’t call them from the list of posts, since the current layout.

Below is my code along side with the different layout set-ups that I’ve provided for which one I need to implement the infinite scroll. I’ve tried different set-ups and alternatives however, each one of them proves to be a failure.

I had one alternative in mind to create a conditional loop at the beginning where one condition would show only 4 posts with the layouts below and the other with all the posts shown, or at least create a condition that will show the post objects as I scroll down the page.

Hope I was clear with my issue and if any other details are needed please let me know.

Thanks in advance

<?php
                        // check if the flexible content field has rows of data
                        if( have_rows('list_of_projects') ):
                             // loop through the rows of data
                            while ( have_rows('list_of_projects') ) : the_row();
                                if( get_row_layout() == 'box_layout_one' ):
                                  $post_objects = get_sub_field('project');
                                  if( $post_objects ):
                                    // override $post
                                    $post = $post_objects;
                                    setup_postdata( $post );
                                    ?>
                                    <div class="box col-lg-6">
                                        <div class="project-wrapper big">
                                            <a href="<?php the_permalink($post->ID); ?>">
                                                <?php echo wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Big Image'); ?>
                                                <div class="project-description">
                                                    <h2><?php echo $post->post_title; ?></h2>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                      <?php wp_reset_postdata(); ?>
                                    <?php endif; ?>
                                      <?php elseif( get_row_layout() == 'box_layout_two' ):

                                      $post_objects_1 = get_sub_field('two_project_one');
                                      $post_objects_2 = get_sub_field('two_project_two');

                                      if( $post_objects_1 && $post_objects_2 ):
                                      $post = $post_objects_1;
                                      setup_postdata( $post );

                                      ?>
                                      <div class="box col-lg-6">
                                            <div class="project-wrapper medium-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                  <?php
                                                  $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                                  ?>
                                                    <?php echo $med_image_url; ?>
                                                    <div class="project-description">
                                                        <h2><?php echo $post->post_title; ?></h2>
                                                    </div>
                                                </a>
                                            </div>
                                            <?php $post = $post_objects_2;
                                            setup_postdata( $post );
                                            ?>

                                            <div class="project-wrapper medium-box">
                                              <?php
                                              $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                              ?>
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                  <?php
                                                  $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                                  ?>
                                                    <?php echo $med_image_url; ?>

                                                    <div class="project-description">
                                                        <h2><?php echo $post->post_title; ?></h2>
                                                    </div>
                                                </a>
                                            </div>
                                          </div>
                                          <?php wp_reset_postdata(); ?>
                                      <?php endif; ?>

                                      <?php elseif( get_row_layout() == 'box_layout_three' ):

                                      $post_objects_1 = get_sub_field('three_project_one');
                                      $post_objects_2 = get_sub_field('three_project_two');
                                      $post_objects_3 = get_sub_field('three_project_three');

                                      if( $post_objects_1 && $post_objects_2 && $post_objects_3 ): $post = $post_objects_1; setup_postdata( $post );
                                      ?>
                                          <div class="box col-lg-6">
                                            <div class="project-wrapper medium-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                  <?php
                                                  $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                                  $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                                  ?>
                                                    <?php echo $med_image_url; ?>"

                                                    <div class="project-description">
                                                        <h2><?php echo $post->post_title; ?></h2>
                                                    </div>
                                                </a>
                                            </div>
                                            <?php
                                            $post = $post_objects_2;
                                            setup_postdata( $post );
                                            ?>
                                            <?php
                                            $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                            $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                            ?>
                                            <div class="project-wrapper small-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                    <?php echo $small_image_url; ?>
                                                    <div class="project-description">
                                                        <h3><?php echo $post->post_title; ?></h3>
                                                    </div>
                                                </a>
                                            </div>
                                            <?php
                                            $post = $post_objects_3;
                                            setup_postdata( $post );
                                            ?>
                                            <?php
                                            $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                            $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                            ?>
                                            <div class="project-wrapper small-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                    <?php echo $small_image_url; ?>

                                                    <div class="project-description">
                                                        <h3><?php echo $post->post_title; ?></h3>
                                                    </div>
                                                </a>
                                            </div>
                                          </div>
                                          <?php wp_reset_postdata(); ?>
                                      <?php endif; ?>
                                      <?php elseif( get_row_layout() == 'box_layout_two_rev' ):

                                      $post_objects_1 = get_sub_field('three_rev_project_one');
                                      $post_objects_2 = get_sub_field('three_rev_project_two');
                                      $post_objects_3 = get_sub_field('three_rev_project_three');

                                      if( $post_objects_1 && $post_objects_2 && $post_objects_3 ):
                                      $post = $post_objects_1;
                                      setup_postdata( $post );
                                      ?>
                                      <?php
                                      $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                      $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                      ?>
                                          <div class="box col-lg-6">
                                             <div class="wrapper-left">
                                                <div class="project-wrapper small-box">
                                                    <a href="<?php the_permalink($post->ID); ?>">
                                                        <?php echo $small_image_url; ?>

                                                        <div class="project-description">
                                                            <h3><?php echo $post->post_title; ?></h3>
                                                        </div>
                                                    </a>
                                                </div>
                                                <?php
                                                $post = $post_objects_2;
                                                setup_postdata( $post );
                                                ?>
                                                <div class="project-wrapper small-box">
                                                    <a href="<?php the_permalink($post->ID); ?>">
                                                      <?php
                                                      $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                                      $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                                      echo $small_image_url;
                                                      ?>

                                                        <div class="project-description">
                                                            <h3><?php echo $post->post_title; ?></h3>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                            <?php
                                            $post = $post_objects_3;
                                            setup_postdata( $post );
                                            ?>
                                            <div class="project-wrapper medium-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                  <?php
                                                  $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                                  $med_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Middle Image');
                                                  ?>
                                                    <?php echo $med_image_url; ?>"

                                                    <div class="project-description">
                                                        <h2><?php echo $post->post_title; ?></h2>
                                                    </div>
                                                </a>
                                            </div>
                                          </div>
                                          <?php wp_reset_postdata(); ?>
                                      <?php endif; ?>

                                      <?php

                                      elseif( get_row_layout() == 'box_layout_four' ):

                                      $post_objects_1 = get_sub_field('four_project_one');
                                      $post_objects_2 = get_sub_field('four_project_two');
                                      $post_objects_3 = get_sub_field('four_project_three');
                                      $post_objects_4 = get_sub_field('four_project_four');

                                      if( $post_objects_1 && $post_objects_2 && $post_objects_3 && $post_objects_4  ):
                                      $post = $post_objects_1;
                                      setup_postdata( $post );
                                      ?>
                                          <div class="box col-lg-6">
                                            <div class="project-wrapper small-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                  <?php
                                                  $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                                  echo $small_image_url;
                                                  ?>

                                                    <div class="project-description">
                                                        <h3><?php echo $post->post_title; ?></h3>
                                                    </div>
                                                </a>
                                            </div>
                                            <?php
                                            $post = $post_objects_2;
                                            setup_postdata( $post );
                                            ?>
                                            <div class="project-wrapper small-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                  <?php
                                                  $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                                  echo $small_image_url;
                                                  ?>

                                                    <div class="project-description">
                                                        <h3><?php echo $post->post_title; ?></h3>
                                                    </div>
                                                </a>
                                            </div>
                                            <?php
                                            $post = $post_objects_3;
                                            setup_postdata( $post );
                                            ?>
                                            <div class="project-wrapper small-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                  <?php
                                                  $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                                  echo $small_image_url;
                                                  ?>

                                                    <div class="project-description">
                                                        <h3><?php echo $post->post_title; ?></h3>
                                                    </div>
                                                </a>
                                            </div>
                                            <?php
                                            $post = $post_objects_4;
                                            setup_postdata( $post );
                                            ?>
                                            <div class="project-wrapper small-box">
                                                <a href="<?php the_permalink($post->ID); ?>">
                                                    <?php
                                                    $small_image_url = wp_get_attachment_image( get_post_thumbnail_id($post->ID), 'Small Image');
                                                    echo $small_image_url;
                                                    ?>

                                                    <div class="project-description">
                                                        <h3><?php echo $post->post_title; ?></h3>
                                                    </div>
                                                </a>
                                            </div>
                                          </div>
                                          <?php wp_reset_postdata(); ?>
                                      <?php endif; ?>

                                <?php
                                endif;

                            endwhile;

                        else :

                            // no layouts found

                        endif;

                        ?>

• John Huebner

• September 4, 2015 at 3:09 am

My understanding of infinite scrolling is that you show a certain number of something. Then when the person viewing your page scrolls down near the last on then you use AJAX to get more results and insert them into the page.

Since what you’re showing are not posts, but related posts from a post object field I think that you’re going to be mostly on your own.

• You’ll need to create or find code that detects when the user has scrolled down to a certain point
• then you’ll need to create the JavaScript that makes the AJAX request
• then create the server side PHP function to get the next set of results and return them
• and finally insert the new results into the page

I’d start here: http://codex.wordpress.org/AJAX_in_Plugins