Home › Forums › Add-ons › Repeater Field › 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
The topic ‘Output Repeater In Two Columns’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.