Change class of element depending on amount of Repeater Field items

• theRTT

• December 13, 2019 at 3:00 am

Hello,

I am looking for a way to change the class of a Repeater Field item, depending on how many Repeater Field items there are.

I’m working with Bootstrap.

Let’s say I have filled in only one Repeater Field, the class of that field should be “col-lg-12”.

So If I’ve filled in two Repeater Fields, the class of those two fields should be “col-lg-6”.

And you guessed it, the class of the fields should be “col-lg-4”, if I’ve filled in three fields, and so on.

Does anyone know how to do this?

Thank you in advance!

• John Huebner

• December 13, 2019 at 4:37 am

$row_count = count(get_field('repeater_field_name'));
$size = 0;
if ($row_count) {
  $size = (int)12/$row_count;
}
if ($size < 2) {
  //force minimum of col-lg-2
  $size = 2;
}
$class = 'col-lg-'.$size;

// your repeater loop here

• theRTT

• December 13, 2019 at 9:40 pm

Hi,

I’m not sure how to implement this code you gave me.

I’ve tried this:

  <?php
      $row_count = count(get_field('highlight'));
      $size = 0;
      if ($row_count) {
        $size = (int)12/$row_count;
      }
      if ($size < 1) {
        //force minimum of col-lg-6
        $size = 6;
      }
      if ($size < 2) {
        //force minimum of col-lg-4
        $size = 4;
      }
      if ($size < 3) {
        //force minimum of col-lg-3
        $size = 3;
      }
      // your repeater loop here
      if( have_rows('highlight') ): while ( have_rows('highlight') ) : the_row();?>
      <a href="<?php the_sub_field('highlight_link');?>">
      <div class="<?php echo 'col-lg-'.$size; ?> <?php echo 'col-md-'.$size; ?> <?php echo 'col-sm-'.$size; ?> <?php echo 'col-xs-'.$size; ?> highlight" style="background-image:url('<?php the_sub_field('highlight_image');?>');">
        <div class="highlight_title">
          <div class="highlight_title_inner">
            <?php the_sub_field('highlight_title');?>
          </div>
        </div>
      </div>
      </a>
    <?php endwhile; else : endif;?>

Yet it doesn’t output the classes I want.

How can I make sure that when I have:
1 item, the size is 12.
2 items, the size is 6.
3 items, the size is 4.
4 items, the size is 3.

Thanks in advance.

• John Huebner

• December 13, 2019 at 11:53 pm

You’ve got more there than you need and your additional ifs are complicating it.

      if ($row_count) {
        $size = (int)12/$row_count;
      }

This calculates the width of the row

if there is 1 row the result is 12 (col-12)
if there is 2 rows the result is 6 (col-6)
3 result 4 (col-4)
4 result 3 (col-3)
5 result 2 (actually 2.4 rounded to int) (col-2)
6 result 2 (col-2)

The only thing I did here was to add

if ($size < 2) {
  //force minimum of col-lg-2
  $size = 2;
}

assuming you did not want to have a column smaller than that.