usefulbattery usefulbattery - 3 months ago 10
PHP Question

Define Grid Based on Multiple Item Counts

Looking to solve a problem I'm having dynamically defining classes using WordPress Advanced Custom Fields' Repeater field. I've done some digging but haven't been able to find a resource with the specificity that I'm looking for.

I'm displaying a series of portfolio images, and depending on how many there are I would like to give certain photos specific class names within the Foundation grid. Essentially I'm looking to do the following:


  • For items 1-4: Apply a class of large-6

  • For items 5+: Apply a class of large-4

  • If only 1 item: Apply a class of large-8



I've been able to get the first two examples to work, but I'm having trouble defining a third set of parameters. I've tried a number of different routes but I'm not sure what's best at this point. See below for a mockup of what I am looking to accomplish, as well as my code example.

Appreciate any advice!

Mockup



<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

Your question is not clear enough to me because you say Apply a class of large or Apply a class of small, but then in your code you use .large-6 and also .large-8.

Anyway, supposing what you're trying to achieve (given your image), your PHP code should be something like this:

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

Notice: You were reseting to 0 your iterator index ($count in your case) in every iteration. Also, you were incrementing $counter (not $count) which wasn't defined.

Comments