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;
        }
      }
    }
    
Viewing 4 posts - 1 through 4 (of 4 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.