How to vary post loop results layout and resume?

Question

When I am outputting a post loop in a particular mark-up, how do I break at certain intervals, use a different mark-up for a number of next posts and then resume the loop at the appropriate point in standard layout?

Specifically…

To turn the layout on the left in to the one on the right, wherein the flow of post cards is interrupted and changed in order to introduce visual variation…

enter image description here

Note, the existing post loop for the regular whole grid of cards (left-hand example) is output as follows…

if ( $posts->have_posts() ) { ?>

    <!-- Posts row -->
    <div class="row pb-4 px-2 posts-row">
      <?php

        // Post Loop
        while ( $posts->have_posts() ) {

          $posts->the_post();

                // Regular card
                 echo '<div class="d-flex align-items-stretch col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 p-2 post-item overlay-bg">';
                 set_query_var('bgcolor',    'bg-white');
                 set_query_var('use_logo',   true);
                 set_query_var('use_byline', true);
                 set_query_var('use_source', false);
                 get_template_part('pieces/cards/post', multi);
                 echo '</div>';

        } // end while

        wp_reset_query();
      ?>
    </div><!-- end .row -->
  <?php
   } else { ?>
    Nothing here.
  <?php } ?>

But the question is not a matter of changing simply the post card CSS within the same grid (that is a challenge I already surmounted). Rather, I want to break out of the grid and re-use the alternate, above-the-fold feature block you see coloured in purple.

That block is rendered using my function display_showcase_features(), which takes as an argument a WP_Query Object containing five posts and then outputs the relevant mark-up using an alternative container grid as well as an alternative post card type.

What I need to accomplish is…

  • At post 13 in $posts
  • break the divs
  • send a WP_Query Object containing the next five posts to display_showcase_features(), which outputs the block of five posts in alternate layout
  • restore the row’s opening divs
  • resume from post 18 in standard layout
  • the same at regular intervals.

I have tried the following…

if ( $posts->have_posts() ) { ?>

  <!-- Posts row -->
  <div class="row pb-4 px-2 posts-row">
    <?php

    $i=0;

      // Post Loop
      while ( $posts->have_posts() ) {

        $posts->the_post();
        $i++;

        /**
        * =======================================================
        *            VARY POST CARDS TO BREAK UP LIST
        * =======================================================
        */
        if ($i == 13 or $i == 26) { ?>
              </div><!-- end content column -->
              </div><!-- end whole row -->
              <?php display_showcase_posts($showcase_features); ?>
              <?php
              echo '<div class="container-fluid bg-light py-4">';
              echo '<div class="row pb-4 px-2 posts-row">';
               ?>
        <?php
        } else {
          /**
          * =======================================================
          *            STANDARD POST CARD LAYOUT
          * =======================================================
          */
              // Regular card
               echo '<div class="d-flex align-items-stretch col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 p-2 post-item overlay-bg">';
               set_query_var('bgcolor',    'bg-white');
               set_query_var('use_logo',   true);
               set_query_var('use_byline', true);
               set_query_var('use_source', false);
               get_template_part('pieces/cards/post', multi);
               echo '</div>';

        }

      } // end while

      wp_reset_query();
    ?>
  </div><!-- end .row -->
<?php
 } else { ?>
  Nothing here.
<?php } ?>

The mark-up interruption works fine, it’s the WordPress stuff I need to learn more about…

1. How do I get a WP_Query object containing the next five posts?

In the above attempt, I am sending to display_showcase_features() merely $showcase_features, which contains the same five posts used in the above-the-fold block. But that’s really only for a test.

Instead, what think I need is the next five actual posts in the standard-layout loop below. Do I need to do a new query here for some kind of range? Will that be expensive on the database?

2. How do I then elegantly resume the standard-layout loop output at the right place?

That is, in the right-hand visual example above, with the code attempt immediately above, post 13 is actually NOT rendered, because I am displaying the showcase block at that point instead. The loop should resume five posts after it was broken, assuming display_showcase_features() did output five posts.

3. How do I do this at regular intervals?

The pattern of intended layout breakage can be predicted. ie. 12 posts in standard layout, followed by sending five to display_showcase_features(), then another 12.

Though I fear that pagination could ruin things, if it might leave my divs opened, for example.

0
, Robert Andrews 10 months 0 Answers 107 views 0

Leave an answer