Support

Account

Home Forums Add-ons Repeater Field Output Repeater In Two Columns

Solving

Output Repeater In Two Columns

  • I am trying to figure out how to output a repeater field in an ordered list in two columns where the order/format is like this:

    1 5
    2 6
    3 7
    4

    Instead of:

    1 2
    3 4
    5 6
    7

    I have tried a bunch of CSS stuff to no avail. I know just enough PHP to be dangerous but this is exceeding my limits.

    I can conceptualize the actions needed but can’t seem to turn it into code…

    1) Count the number total # of rows

    2) Divide total # of rows by 2 and assign variable for the left list and right list.

    3) Some exception for total rows equaling an odd number, for example total number rows 7 gets divided into a row of 4 and a row of 3 instead of 3.5 and 3.5. Must maintain whole numbers.

    4) Output two lists: left justified list (first half of rows) and right justified list (second half of rows)

    Any help with this problem would be greatly appreciated.

  • personally, I would show this in one list and float the <li> elements left. Possibly add an odd an even class so that I could add a clear left on the odd ones. This way on a really narrow screen they would still be listed in the correct order.

    As for your question, something like this

    
    if (have_rows('repeater')) {
      $column_1 = array();
      $column_2 = array();
      $count = 0;
      while (have_rows('repeater')) {
        the_row();
        if ($count % 2 == 0) {
          $column_1[] = get_sub_field('sub_field');
        } else {
          $column_2[] = get_sub_field('sub_field');
        }
        $count++;
      }
    }
    // now create your ul elements and loop through each array
    
  • John,

    Could you please complete the code and show how you create the ul elements and loop through each array?

    Thanks.

  • I did not get a working solution for this and abandoned the effort. I would like to find out a technique though that works.

  • I worked it out:

    
            <ul class="col-md-6">
              <?php $i = 0; $j = count( get_field('repeater_field') );?>
              <?php if( have_rows('repeater_field') ): while ( have_rows('repeater_field') ) : the_row(); ?>
                    <?php the_sub_field('sub_field'); ?>
                <?php if ( ( $i + 1 ) == ceil($j / 2) ) echo '</ul><ul class="col-md-6">'; ?>
                <?php $i++; endwhile; ?>
              <?php endif; ?>
            </ul>
    
  • 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

  • Solution of dbrabyn works great. But how can i modify to display 3 columns? col-md-4 ?

  • Hello, everyone,

    I use ACF on the website of a small open-air theatre. ACF occurs in “almost” every page.

    URL: http://www.reckenfeld-freilichtbuehne.de

    I would now like to optimize some pages that have become very long, e. g. the detail page of the play “Michel in the soup bowl” (https://s.reckenfeld-freilichtbuehne.de/qNU35).

    I have the following ACF fields that appear as repeater fields:

    Upper field: stueckverlinkung
    Profile picture: verlinkung-stueck-profil-bild
    Year of performance: verlinkung_jahr
    actor’s name: verlinkung-mitglied
    URL to the actor profile: verlinkung-mitgliedurl
    Name of the role: verlinkung-stueckrolle
    if necessary, special task: verlinkung-sonderaufgabe

    I would now like to place two entry blocks next to each other – maybe three blocks side by side, I have to look.

    So how can I create two columns where multiple ACF fields are queried with the repeater function?

    Example:

    <table>
    <tr>
    <td>
    profile picture
    Name of the actor incl. profile linking
    Year of appearance | Role name or special task
    </td>

    <td>
    profile picture
    Name of the actor incl. profile linking
    Year of appearance | Role name or special task
    </td>

    </tr>
    </table>

    Greetings Tobias

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

You must be logged in to reply to this topic.