WordPress – Pulling just 4 images from a repeater field within a loop

2 Views

I wondered if someone could help me with something that is probably quite simple when you know how.

I’m creating a game based website and I’m just working on the directory page where a list of all the games will be shown. I’m using a plug-in called ‘Advanced Custom Fields‘ to create all my custom fields for each game.

Read More

At the moment I’m running a loop to pull in each game :- 

<?php $loop = new WP_Query(array('post_type' => 'games', 'posts_per_page' => 10)); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

And then within this loop calling for different custom fields of the game (title, screenshots, description, download buttons etc…). But I have a problem when it comes to the screenshots, I can happily grab all the screenshots, but I just want to pull out 4. I’ve searched around all the threads, looked through the documentation, hit google, but whatever method I’ve tried I haven’t achieved any success yet 🙁

My current code within the above loop for pulling out the screenshots is :- 

<?php if(get_field('screenshots')): ?>
<ul class="screenshots">
<?php while (the_repeater_field('screenshots')): ?>

    <li><a href="<?php the_sub_field('large_screenshot'); ?>" data-fancybox-group="button" class="fancybox"><img src="<?php the_sub_field('thumbnail_screenshot'); ?>" title="<?php the_sub_field('screenshot_title'); ?>"/></a></li>

<?php endwhile; ?>
</ul> <!--- end of screenshots !-->
<?php endif; ?>

Is there a way to just limit my results to a total of 4 instead of displaying all available screenshots? A random 4 would be an even nicer option, but isn’t paramount.

I’m sure the solution is far simpler than some of the things I’ve tried without success so far.

Many thanks for any help received.

Cheers

Rob

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. I don’t know much about the plugin you are using. but a simple solution would be using a counter like this:

    <?php $i=0; ?>
<?php while (the_repeater_field('screenshots')): ?>

<li><a href="<?php the_sub_field('large_screenshot'); ?>" data-fancybox-group="button" class="fancybox"><img src="<?php the_sub_field('thumbnail_screenshot'); ?>" title="<?php the_sub_field('screenshot_title'); ?>"/></a></li>

<?php if($i<4) $i++;
      else break; ?>
<?php endwhile; ?>

  2. I am curious as to how you got more than 1 loop to run, by definition it should work like you’re experience but for some reason when I post the same concept I can only get the while to produce one result even though there are 10 images.

    while(the_repeater_field('horse_images')): 
    $image_id = get_sub_field('image');
    $image_src = wp_get_attachment_image_src($image_id,medium);
    echo '<img src="'.$image_src[0].'">';
endwhile;

    I wonder if it would work if you modified your code like with && $i <= 4

    <?php if(get_field('screenshots')): ?>
<?php $i = 0; ?>
<ul class="screenshots">
   <?php while (the_repeater_field('screenshots') && $i <= 4 ): ?>

   <li><a href="<?php the_sub_field('large_screenshot'); ?>" data-fancybox-group="button" class="fancybox"><img src="<?php the_sub_field('thumbnail_screenshot'); ?>" title="<?php the_sub_field('screenshot_title'); ?>"/></a></li>

   $i++
<?php endwhile; ?>

  3. Look:

    <?php if( have_rows('gallery_img') ): ?>
  <div class="gl-images">
    <div class="flexslider">
      <ul class="slides">
      <?php $i=0; ?>
      <?php while( have_rows('gallery_img') ): the_row(); 
        // vars
        $image = get_sub_field('img_item');
      ?>
      <?php if( $image): ?>
        <li class="slide">
          <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
        </li>
      <?php endif; ?>
      <?php if($i>1) $i++;
        else break; 
      ?>
     <?php endwhile; ?>
     </ul>
  </div>
  </div>
<?php endif; ?>

  4. <?php if (have_rows('service_priceing')): ?>
<?php $n=0; while (have_rows('service_priceing')): the_row(); ?>
<?php $package = get_sub_field('package'); ?>
<?php $rent = get_sub_field('rent'); ?>
<?php $price = get_sub_field('price'); ?>
<div class="columns price-columns">
   <ul class="price">
      <li class="header" style="background-color:<?php if($n==1){ echo "Red"; }else{echo "Blue";}?>"><?php echo $package; ?></li>
      <li class="dates">
         <p><?php echo $rent; ?></p>
      </li>



   </ul>
</div>
<?php $n++; if($n == 3){ break; } endwhile; ?>
<?php endif; ?>