ACF count gallery images

Question

I am trying to make an grid of different size images using the ACF gallery field.

I have managed to do this before in a repeater field by counting rows, but have unable to adjust this to work with the gallery field.

My aim is to have a grid of 10 images using 2 different image sizes.

• Images 1, 2, 3, 6, 7, 8 would be one size
• Images 4, 5, 9, 10 would be a different size

My current markup is:

<?php 
    $images = get_field('home-image-grid');
    $size = 'full';
    if( $images ): 
?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
                <?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

I have tried the markup I used previously with a repeater field, but this only outputs image 1.

<?php 
    $i = 1;
    $images = get_field('home-image-grid');
    $size = 'full';
    if( $images ): 
?>

    <?php foreach( $images as $image ): ?>

        <?php if ( $i == 1 ) { ?>
            image 1
        <?php } elseif ( $i == 2 ) { ?>
            image 2
        <?php } elseif ( $i == 3 ) { ?>
            image 3
        <?php } elseif ( $i == 4 ) { ?>
            image 4
        <?php } ?>

    <?php endforeach; ?>

<?php endif; ?>

I presume this is because of the foreach statement. How can I get this to work?

Answer 1

This work will be done in both gallery or repeater field, both return the array.

you just forgot to add iteration $i++ in the loop.

So your loop will be like

<?php foreach( $images as $image ): ?>

    <?php if ( $i == 1 ) { ?>
        image 1
    <?php } elseif ( $i == 2 ) { ?>
        image 2
    <?php } elseif ( $i == 3 ) { ?>
        image 3
    <?php } elseif ( $i == 4 ) { ?>
        image 4
    <?php } 
     $i++;
     endforeach; ?>

also, if you don't have any complicated condition with your array indexes then you can use foreach loop with the array index like

<?php foreach( $images as $index => $image ): ?>

    <?php if ( $index == 0 ) { ?>
        image 1
    <?php } elseif ( $index == 1 ) { ?>
        image 2
    <?php } elseif ( $index == 2 ) { ?>
        image 3
    <?php } elseif ( $index == 3 ) { ?>
        image 4
    <?php } 
     endforeach; ?>

Answer 2

If 2 separated Background images:

<div class="d-container"><div class="diagonal diagonal--left" style="background-image: url(
	<?php
		if ( $course_zig_images ) :
			foreach ( $course_zig_images as $index => $course_zig_image ) :
				if ($index == 0 ) :
					echo $course_zig_image['url'];
				endif;
			endforeach;
		endif;
	?>
	)"></div></div>
  
  
  <div class="d-container"><div class="diagonal diagonal--right" style="background-image: url(
	<?php
	if ( $course_zig_images ) :
		foreach ( $course_zig_images as $index => $course_zig_image ) :
			if ($index == 1 ) :
				echo $course_zig_image['url'];
			endif;
		endforeach;
	endif;
	?>
	)"></div></div>