Support

Account

Home Forums Add-ons Gallery Field Limit Image Gallery

Solving

Limit Image Gallery

  • Hi, I am using the gallery field and the code below:

    I wish to limit the amount of images shown, so instead of the whole gallery, say 10 photos, I wish to limit it just to the first 3. How could I do this?

    <?php 
    
    $images = get_field('gallery');
    
    if( $images ): ?>
        <ul>
            <?php foreach( $images as $image ): ?>
                <li>
                    <a href="<?php echo $image['url']; ?>">
                         <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </a>
                    <p><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
  • add a counter and break when the limit is reached, or use a for loop instead of a foreach loop.

    
    <?php 
      // using counter
      $images = get_field('gallery');
      if ($images) {
        $counter = 1;
        ?>
          <ul>
            <?php 
              foreach( $images as $image ) {
                ?>
                  <li>
                    <a href="<?php echo $image['url']; ?>">
                         <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </a>
                    <p><?php echo $image['caption']; ?></p>
                  </li>
                <?php 
                $counter++;
                if ($couner == 10) {
                  break;
                }
              }
            ?>
          </ul>
        <?php 
      }
    ?>
    
    
    <?php 
      // using for loop, this is the one I'd prefer
      $images = get_field('gallery');
      if ($images) {
        ?>
          <ul>
            <?php 
              for($i=0; $i<count($images) && $i<10; $i++) {
                $image = $images[$i];
                ?>
                  <li>
                    <a href="<?php echo $image['url']; ?>">
                         <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </a>
                    <p><?php echo $image['caption']; ?></p>
                  </li>
                <?php 
              }
            ?>
          </ul>
        <?php 
      }
    ?>
    
  • Thanks, what if I wanted to do it with repeater rows? So…

    				<?php while ( have_rows('image_gallery') ) : the_row();  ?>					
    					<div class="col-md-6">
    						<div style="background-image: url(<?php the_sub_field('image'); ?>); background-size: cover; height: 240px;">
    							<a href="#" style="display: block; height: 240px;">							</a>
    						</div>	
    					</div>
    			    <?php endwhile; ?>
  • With a repeater you would use the counting method

    
    if (have_rows('field-name')) {
      $count = 1;
      while (have_rows('field-name')) {
        // your output here
        
        $count++;
        if ($count == 10) {
          break;
        }
      }
    }
    
  • Hello I am trying to limit the gallery show only 2 images. But it doesn’t seem to work. Any idea what am I doing it wrong here?
    Thanks

    <?php
    
    // if ACF is not active, abort.
    if ( ! class_exists( 'acf' ) ) {
    	return;
    }
    
    $images = get_field( 'main_product_gallery' );
    $size = 'medium'; // (thumbnail, medium, large, full or custom size)
    if ( $images ) {
    	$counter = 1;
    ?>
    <div class="product-gallery">
    	<?php
    	foreach( $images as $image ) {
    	?>
    	<div class="product-gallery__image-wrap ratio-1-1">
    		<?php echo wp_get_attachment_image( $image['ID'], $size );?>
    	</div>
    	<?php 
    		$counter++;
    		if ($couner == 2) {
    			break;
    		}
    	}
    	?>
    </div>
    <?php
    }
    
    ?>
  • Turns out it was a typo..
    $couner == 2

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.