Wordpress ACF Repeater while loop - wordpress

Question

Hi I would like to have the following structure from the div's but I'm not able to except the div from the while loop. My target is:
<div class="grid-12">
<img ...>
</div>
<div class="girid-12 parent clear-each-2">
<div class="grid-6>
<img ...>
</div>
<div class="grid-6>
<img ...>
</div>
</div><!-- close clear-each-2 -->
How could I exclude the div clear-each-2 from the while loop?
my code:
<?php if( have_rows('the_gallery') ):
$i = 1;
while( have_rows('the_gallery') ): the_row();
// vars
$imageBig = get_sub_field('image_big');
$imageMedium = get_sub_field('image_medium');
$imageSmall = get_sub_field('image_small');
$titleB = $imageBig['title'];
$altB = $imageBig['title'];
$captionB = $imageBig['caption'];
$titleM = $imageMedium['title'];
$altM = $imageMedium['title'];
$captionM = $imageMedium['caption'];
$titleS = $imageSmall['title'];
$altS = $imageSmall['title'];
$captionS = $imageSmall['caption'];
?>
<?php if( $imageBig ): ?>
<div class="grid-12">
<img src="<?php echo $imageBig['url']; ?>" alt="<?php echo $altB['alt'] ?>" class="max-img" />
<div class="imgDescriptionSmall float-right"><strong><?php echo $titleB; ?></strong> <?php echo $captionB; ?></div>
</div>
<?php endif; ?>
<?php if( $imageMedium ): ?>
<div class="gird-12 parent clear-each-2">
<div class="grid-6 grid-mobile-12">
<img src="<?php echo $imageMedium['url']; ?>" alt="<?php echo $altM['alt'] ?>" class="max-img" />
<div class="imgDescriptionSmall float-right"><strong><?php echo $titleM; ?></strong> <?php echo $captionM; ?></div>
</div>
</div>
<?php endif; ?>
<?php if ($imageSmall):?>
<div class="grid-12 parent clear-each-3">
<div class="grid-4 grid-tablet-4 grid-mobile-12">
<img src="<?php echo $imageSmall['url']; ?>" alt="<?php echo $altS['alt'] ?>" class="max-img" />
<div class="imgDescriptionSmall float-right"><strong><?php echo $titleS; ?></strong> <?php echo $captionS; ?></div>
</div>
</div>
<?php endif; $i++; ?>
<?php endwhile; ?>
Best, Carol

Answer 1

Based on the comments and info you've provided, I'd recommend creating an array in the original loop and then looping through the array to create the output desired.
<?php if( have_rows('the_gallery') ):
$count = 0;
while( have_rows('the_gallery') ): the_row();
// vars
$imageBig = get_sub_field('image_big');
$imageMedium = get_sub_field('image_medium');
$imageSmall = get_sub_field('image_small');
$images['large'][$count]['url'] = $imageBig['url'];
$images['large'][$count]['title'] = $imageBig['title'];
$images['large'][$count]['alt'] = $imageBig['title'];
$images['large'][$count]['caption'] = $imageBig['caption'];
$images['medium'][$count]['url'] = $imageMedium['url'];
$images['medium'][$count]['title'] = $imageMedium['title'];
$images['medium'][$count]['alt'] = $imageMedium['title'];
$images['medium'][$count]['caption'] = $imageMedium['caption'];
$images['small'][$count]['url'] = $imageSmall['url'];
$images['small'][$count]['title'] = $imageSmall['title'];
$images['small'][$count]['alt'] = $imageSmall['title'];
$images['small'][$count]['caption'] = $imageSmall['caption'];
$count++;
endwhile;
endif;?>
<?php if($images['large']):?>
<div class="grid-12">
<?php foreach($images['large'] as $img):?>
<img src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt'] ?>" class="max-img" />
<div class="imgDescriptionSmall float-right"><strong><?php echo $img['title']; ?></strong> <?php echo $img['caption']; ?></div>
<?php endforeach;?>
</div>
<?php endif;?>
<?php if($images['medium']):?>
<div class="grid-12 parent clear-each-2">
<?php foreach($images['medium'] as $img):?>
<div class="grid-6">
<img src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt'] ?>" class="max-img" />
<div class="imgDescriptionSmall float-right"><strong><?php echo $img['title']; ?></strong> <?php echo $img['caption']; ?></div>
</div>
<?php endforeach;?>
</div>
<?php endif;?>
<?php if($images['small']):?>
<div class="grid-12 parent clear-each-3">
<?php foreach($images['small'] as $img):?>
<div class="grid-4">
<img src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt'] ?>" class="max-img" />
<div class="imgDescriptionSmall float-right"><strong><?php echo $img['title']; ?></strong> <?php echo $img['caption']; ?></div>
</div>
<?php endforeach;?>
</div>
<?php endif;?>