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.