Ryan Lebo Ryan Lebo - 7 months ago 34
PHP Question

Create formula to add classes based on field length

I need some insight on how to create a formula that will determine what class to add to a

div
element based on the number of div's being displayed.

Currently I am using ACF to create a repeater field that will have one sub-field that links to a page based what the admin selects. These fields will display in their own div's based on a while loop. I am using Bootstrap classes such as
col-sm-12
,
col-sm-6
, and
col-sm-4
.

while( have_rows( 'project_repeater' ) ): the_row();

$post_object = get_sub_field( 'project_type' );

$count = count( get_field('project_repeater') ); // Output 4

$mod = $count % 3; // Output 1

if( $post_object ):

$post = $post_object;
setup_postdata( $post );

$classname = '';

if( $mod == 1 ) {

if( $count == 1 ) {
$classname .= 'col-sm-12';
} elseif( $count == 4 ) {
$classname .= 'col-sm-6';
} else { // $count == 7
$classname .= 'col-sm-4';
}

} elseif( $mod == 2 ) {

if( $count == 2 ) {
$classname .= 'col-sm-6';
} elseif( $count == 5 ) {
// $classname .= 'col-sm-12';
} else { // $count == 8
// $classname .= 'col-sm-4';
}

} else { // $mod == 0
$classname .= 'col-sm-4';
}

?>
<div class="project-cat <?php echo $classname; ?>">
<a href="<?php the_permalink( $post ); ?>">
<h5><?php the_title(); ?></h5>
<p><?php the_excerpt(); ?></p>
</a>
</div>
<?php

wp_reset_postdata();
endif;

endwhile;


Now when
$count == 5
, I need it to set the first 3 div's to have
col-sm-4
and then the last 2 div's to have
col-sm-6
(this will display the divs in this order stacked on top of each other: 3,2).

When
$count == 7
, it will need to be similar to when
$count == 5
but have the first 3 as
col-sm-4
and the last 4 as
col-sm-6
(3,2,2)

When
$count == 8
, it will be slightly different where I have the first 6 as
col-sm-4
and the last 2 as
col-sm-6
(3,3,2).

Instead of using
if
statement after if statement, there has to be a better way to create a formula that will determine which class to use based on the number of
div
elements that are being displayed.

Answer

This is more math and logic problem rather than coding problem.

Why don't you 1. get the number of elements.

divide by 3 and floor the result. So you can know how many rows of col-xx-4 you are going to have.

let's say you have 14 items in total. Than fist 12 element should have col-md-4. if you round 14/3 = 4 what is left is 14 - (3*4) = 2 so if what is left is 1 than you can use col-md-12 class, if it is 2 than col-md-6.

so while outputting you assign class col-md-4 to first 12 elements (round 14/3 = 4) and then assign appropriate class to the remaining elements (14 - (3*4) = 2) based on their number (1 or 2)

Do you think it will work for you?

Sequence

set a few variables

$total = total number of items. You can simply run the loop with a counter.

$md4-limit = floor($total/3)*3;
$remaining = $total - $md4-limit;

then when you are running the loop, use the $i and for each element increment that value and when outputting check

if ($i <= $md4-limit) {
$class = ' col-md-4 ';
} else {
 if($remaining == 1) { $class = ' col-md-12 '; }
 if($remaining == 2) { $class = ' col-md-6 '; }

}

then echo class into column html where the class should be :)

ANOTHER option is to add row width options to the your ACF repeater field and just construct the grid on the back end.