Wordpress ACF 中继器 while 循环

Question

您好，我想从 div 中获得以下结构，但除了 while 循环中的 div 之外，我无法做到这一点。我的目标是：

<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 -->

如何从 while 循环中排除 div clear-each-2？

我的代码：

<?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>&nbsp; <?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>&nbsp; <?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>&nbsp; <?php echo $captionS; ?></div>
                    </div>
            </div>
            <?php  endif;  $i++; ?>
    <?php endwhile; ?>

最好的，卡罗尔

Answer 1

根据您提供的 cmets 和信息，我建议在原始循环中创建一个数组，然后遍历该数组以创建所需的输出。

<?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>&nbsp; <?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>&nbsp; <?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>&nbsp; <?php echo $img['caption']; ?></div>
        </div>
    <?php endforeach;?>
    </div>
<?php endif;?>