Support

Account

Home Forums Add-ons Repeater Field Output Repeater In Two Columns Reply To: Output Repeater In Two Columns

  • Hi there John and Everyone! I came across the same problem, and I think I found a good, working solution. First I was trying to do the same as John suggested with two separate columns. The problem with this (at least in my case) is that your repeater fields will not have the same content. One will have more text then the other, so the height of the elements will not be the same. Meaning to say, if you put them in two columns, you’re not gonna be able to align them horizontally on the same line because of the height difference. (1-5, 2-6, 3-7, ect..)
    I realised that I’m gonna have to get rid of the two columns, and instead just rearrange the order of the incoming elements. I’m a beginner in PHP, but after sitting on it for a day or two, and googling a lot, I came up with this code:

    <?php
          $rows = get_field('repeater_field');
          $halfRows = ceil(count($rows)/2);
          $array1 = array_slice($rows, 0, $halfRows);
          $array2 = array_slice($rows, $halfRows);
          $elements = [];
                    
          for ($i=1; $i <= $halfRows; $i++) {
                            
              if (!empty($array1)) {
                  array_push($elements, $array1[0]);
                  array_shift($array1);
              }
                                       
              if (!empty($array2)) {
                   array_push($elements, $array2[0]);
                   array_shift($array2);
              }
         }
    ?>

    So first you count the incoming rows, divide it by 2 and round the number up. (So if you have 7 rows, this number is gonna be 4 instead of 3.5)
    Next, you make two new arrays: One containing the elements until the rounded up number, the other the rest. (So you’ll have: array1 = 1,2,3,4 array2 = 5,6,7)
    After this, you create a third new array inside of a for loop. Add only the first element at each loop from both array1 and array2, and remove this element from it’s parent array, so the next time the loop runs, the second is gonna be first, and so on.. (So you’ll get: 1,5,2,6,3,7,4, ect..)
    If your loop runs let’s say 4 times, but you only have 7 elements, you don’t want to have an 8th, empty element in your new array. So you also need to check first if array1 and array2 are not empty before adding a new element.

    Maybe there is a better/easier way to solve this, but this is what I came up with. Hope it helps you guys! Please let me know what you think!

    Cheers, Gabor