0

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; 
  • I think you should change the $counter % 6 == 0 to $counter % 3 == 0, and how does it not work with the pagination - e.g. what's not showing up that should show up? – Sally CJ Nov 9 '19 at 14:44
  • @SallyCJ oops sorry about that, updated. so with regards to pagination, if there are 6 images in the gallery lets say and the posts_per_page is 9, 3 gallery images appear(image 1,2, & 3) on page one where they should be, but on going to next page, no gallery images appear and I was expecting to get image 4,5, & 6 on page 2. – nahum Nov 9 '19 at 19:26
  • Did you dump the $images to check if it actually does have more than 3 items? But your code now seems fine, except you'd want to slice the array so that the images are distributed as expected across all pages. E.g. $images = get_field( ... ); $images = array_slice( $images, 0, 3 ); – Sally CJ Nov 10 '19 at 23:40
  • yes there many images are supplied by the gallery var dump. but I guess I forgot to mention! I do have infinitescroll on, so that explains I think why NO images where appearing on the next page. I turned that off and went back to regular page nav and what I get now on the following pages is the same first 3 images distributed appropriately but same 3 first images on every page. – nahum Nov 11 '19 at 0:24
  • As I said, you can slice the array, but looking at your code, my current answer should help. And let me know if it does. – Sally CJ Nov 11 '19 at 1:40
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 ).

  • yes just before i saw this answer, I had found my way around array_slice and pagination using $paged. thanks for clueing me in on that. now on to making it work with infinite scroll. – nahum Nov 11 '19 at 1:54
  • Yes, I can see that. But my answer was for the updated code as in this revision. And if you're happy with slicing the array, then you can add your solution as an answer instead of editing the post - and I'd remove my answer. – Sally CJ Nov 11 '19 at 2:03
  • Btw, regarding making your code works with infinite scroll, you should post your question on SO instead since 3rd party plugins (and generic JS questions) are off-topic on WPSE. – Sally CJ Nov 11 '19 at 2:29
1

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; 
  • Don't forget to accept your answer, so that people know the question has an accepted solution. – Sally CJ Nov 13 '19 at 20:25
  • Thanks @SallyCJ you've been very helpful on this, my first wp stack exchange post. – nahum Nov 14 '19 at 20:38
  • No problem, and be sure to check the help pages to avoid asking off-topic questions (e.g. questions asking how to use a function in a 3rd party plugin). :) PS: I +1/upvote your answer for your effort in figuring out the solution (using array_slice()). – Sally CJ Nov 15 '19 at 5:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.