根据多个项目计数定义网格

Question

想要解决我正在使用 WordPress 高级自定义字段的 Repeater 字段动态定义 classes 的问题。我已经进行了一些挖掘，但未能找到具有我正在寻找的特异性的资源。

我正在展示一系列作品集图片，并且根据图片的数量，我想在 Foundation 网格中为某些照片指定特定的 class 名称。本质上，我希望执行以下操作：

对于项目 1-4：应用 class of large-6
对于项目 5+：应用 class of large-4
如果只有 1 项：应用 class of large-8

我已经能够让前两个示例正常工作，但我在定义第三组参数时遇到了问题。我已经尝试了很多不同的路线，但我不确定目前最好的路线是什么。请参阅下面的模型，了解我希望完成的工作以及我的代码示例。

感谢任何建议！

<div class="row portfolio-examples">

 <?php
        if( have_rows('portfolio_examples') ): 
         while ( have_rows('portfolio_examples') ) : the_row();
    $count = 0;
    $work = get_sub_field('portfolio_work');
    ?>
                    
  <?php if ($count != 0 || $count < 4) :?>
        
        <div class="large-6 medium-6 columns end">
            <?php if( $work ): ?>
                <img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
            <?php endif; ?>
        </div>
  
   <?php else: ?>
        
 <div class="large-8 medium-8 large-centered medium-centered columns">
            <?php if( $work ): ?>
                <img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
            <?php endif; ?>
            </div>
        
    <?php endif; ?>
    
    <?php 
        $counter++; 
        endwhile;
        endif; 
    ?>
    
</div>

Answer 1

你的问题对我来说不够清楚，因为你说 应用 class 大 或 应用 class 小，但随后在您的代码中使用 .large-6 以及 .large-8。

无论如何，假设您要实现的目标（根据您的形象），您的 PHP 代码应该是这样的：

<div class="row portfolio-examples">
<?php
if (have_rows('portfolio_examples')) :
    /* We need to know the total number
     * of rows in your repeater since you have
     * a case where there's only one item.
     */
    $portfolio = get_field('portfolio_examples');
    $count = is_array($portfolio) ? count($portfolio) : 0;
    $index = 0;
    while (have_rows('portfolio_examples')) : the_row();
        if ($count == 1) :
            /* Place here your code for when
             * there's only 1 item in your portfolio.
             */
            ?>
            <div class="medium"><!-- Medium item --></div>
            <?php
        elseif ($count > 1 && $index <= 3) :
            // Code for your first 4 items
            ?>
            <div class="large"><!-- Large item --></div>
            <?php
        elseif ($count > 1 && $index > 3) :
            // Code for your 5+ items
            ?>
            <div class="small"><!-- Small item --></div>
            <?php
        else :
            // There are no items in your portfolio.
        endif;
        $index++;
    endwhile;
endif;
?>
</div>

注意：您在每次迭代中都将 迭代器 索引（在您的情况下为 $count）重置为 0。此外，您正在增加未定义的 $counter（不是 $count）。

根据多个项目计数定义网格

Define Grid Based on Multiple Item Counts

php

advanced-custom-fields