Home › Forums › Add-ons › Gallery Field › 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
}
?>
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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.