Support

Account

Home Forums Add-ons Repeater Field Change class of element depending on amount of Repeater Field items

Solving

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!

  • 
    $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.

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.