Distribute Gallery Images Every nth in Loop

Question

I have added an acf image gallery for archive terms and I would like to take those images and insert one image from the gallery every 3 posts in the term archive. This is what I have so far but I am not yet getting them to distribute sequentially every 3 posts.

1-2-3 posts
Image 1
4-5-6 posts
Image 2
7-8-9 posts
Image 3

// get the current taxonomy term
$queried_object = get_queried_object(); 
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id; 
$images = get_field('term_gallery', $taxonomy .'_' . $term_id); //image ids
$size = 'full'; // (thumbnail, medium, large, full or custom size)

$counter = 1;

if ( have_posts() ) : 
while ( have_posts() ) : the_post(); 

get_template_part( 'template-parts/content', get_post_type() );
?>

<?php /*//////////////////INSERT IMAGE///////////*/?>
<?php  if($counter % 3 == 0): ?>
<?php if( $images ): ?>

    <?php foreach( $images as $image_id ): ?>



          <div class="image-<?php echo $counter;?>">
            <?php echo wp_get_attachment_image( $image_id, $size ); ?>
          </div>



    <?php endforeach; ?>

<?php endif;?>
<?php endif;?>
<?php /*/////////////////INSERT IMAGE///////////*/?>

<?php

$counter++;

endwhile; 

endif; 

With the above the entire gallery is shown every 3 posts. As in

1-2-3 posts
Image 1 + Image 2 + Image 3
4-5-6 posts
Image 1 + Image 2 + Image 3

UPDATE don't know how i got this but it works partly, it just doesn't work with pagination after first page? No images at all show on the next page when I expected to get the next 3 images of the gallery.

// get the current taxonomy term
$queried_object = get_queried_object(); 
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id; 

$images = get_field('term_gallery', $taxonomy .'_' . $term_id);
$size = 'full'; // (thumbnail, medium, large, full or custom size)
$images_len = count($images); // max

$counter = 1;
$img_ct = 0;

if ( have_posts() ) : 
while ( have_posts() ) : the_post(); 

get_template_part( 'template-parts/content', get_post_type() );

?>
<?php /*//////////////////INSERT IMAGE///////////*/?>
<?php if( $images ): ?>

  <?php  if($counter % 3 == 0): ?>

         <?php if($img_ct == $images_len ) $img_ct = 0;?>

         <div class="image-<?php echo $img_ct;?>">

        <?php echo wp_get_attachment_image( $images[$img_ct], $size ); ?>

        </div>

        <?php $img_ct++;?>

  <?php endif;?>
<?php endif;?>
<?php /*//////////////////INSERT IMAGE///////////*/?>

<?php

$counter++;

endwhile; 

endif; 

Answer 1

As I pointed in the comments, if for example you're displaying 9 posts per page, which means there would be 3 gallery images shown per page, and you want page #1 to show images 1-3, page #2 to show images 4-6, and so on, then you would want to paginate the gallery images:

// the number 3 below is the position where the image is to be added to
$paged = max( 1, get_query_var( 'paged' ) ); // get the current page number
$per_page = floor( max( 1, get_query_var( 'posts_per_page' ) ) / 3 );

$counter = 1;
$img_ct = ( $paged - 1 ) * $per_page; // start showing images of this index

And that would replace this part:

$counter = 1;
$img_ct = 0;

Also, you should use if ( ! empty( $images ) ) instead of just if ( $images ).

Answer 2

I was able to get to a similar solution

// get the current taxonomy term
$queried_object = get_queried_object(); 
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id; 

$images = get_field('term_gallery', $taxonomy .'_' . $term_id);
$size = 'full'; // (thumbnail, medium, large, full or custom size)

$limit = 3; //how many gallery images per page

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$offset = ($paged - 1) * $limit;
$images = array_slice($images, $offset, $limit);

$counter = 1; //post counter
$img_ct = 0; //image counter

if ( have_posts() ) : 
while ( have_posts() ) : the_post(); 

get_template_part( 'template-parts/content', get_post_type() );

?>

<?php /*//////////////////INSERT IMAGE///////////*/?>

<?php if( ! empty( $images ) ): ?>

<?php  if($counter % 3 == 0): ?>

     <div class="image-<?php echo $img_ct;?>">

    <?php echo wp_get_attachment_image( $images[$img_ct], $size ); ?>

    </div>

    <?php $img_ct++;?>

  <?php endif;?>
<?php endif;?>

<?php /*//////////////////INSERT IMAGE///////////*/?>

<?php

$counter++;

endwhile; 

endif;