Loop first six posts in carousel, next eight in grid

Question

The front page needs to have the first six posts in a carousel and then the next eight in a grid. What's the best practice for looping through that kind of design? I'm currently using "get_posts" to call the first 14 posts, and then manually calling each one after that, but I figured there has to be a better way.

Here's what I do at the beginning of index.php:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset = ($paged - 1) * 14;

$args = array(
    'numberposts'       => 14,
    'offset'            => $offset,
    'orderby'           => 'date',
    'order'             => 'DESC',
    'post_type'         => 'post',
    'post_status'       => 'publish',
    'suppress_filters'  => true
);
$front_page_posts = get_posts( $args );

The problem is that I can't call "get_template_part" because there isn't actually a post loop, so the rest of my code looks something like this:

<div class="carousel">
    <?php   get_carousel_slide($front_page_posts[0]->ID, true); ?>
    <?php   get_carousel_slide($front_page_posts[1]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[2]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[3]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[4]->ID); ?>
    <?php   get_carousel_slide($front_page_posts[5]->ID); ?>
</div>

[...]

<div class="grid">
    <?php
    $count = 6;
    while($count < 14){
        get_front_eighth($front_page_posts[$count]->ID);
        $count++;
    }
?>

As you can see, I have to call a separate function to get the template instead of using "get_template_part".

So what's best practice for doing this?

Answer 1

Use WP_Query with offset like this

   <?php
    $offset = 6;
    $post_args = array(
        'post_type' => 'post',
        'posts_per_page' => $offset,
    );

    $slider_blog_posts = new WP_Query( $post_args );
    ?>

    <?php if ( $slider_blog_posts->have_posts()  ): ?>
      <div class="carousel">
        <?php while( $slider_blog_posts->have_posts() ): $slider_blog_posts->the_post(); ?>
          <?php   get_carousel_slide( get_the_ID, true); ?>
        <?php endwhile; ?>
      </div>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>

and then create a new query for the rest of the posts:

 <?php
    $new_args = array(
          'post_type' => 'post',
          'posts_per_page' => 8,
          'offset' => $offset
        );

       $grid_blog_posts = new WP_Query( $new_args );
    ?>   
        <?php if ( $grid_blog_posts->have_posts()  ): ?>
            <div class="grid">
               <?php while( $grid_blog_posts->have_posts() ): $grid_blog_posts->the_post(); ?>
                  <?php get_front_eighth( get_the_id() ); ?>
                <?php endwhile; ?>
             </div>
        <?php endif; ?>
        <?php wp_reset_postdata(); ?>

as for the functions use them to return data not to display HTML. Displaying HTML should be done in fragments.