Forum

Thread tagged as: Suggestions

How to Reverse order of Repeaters: Solved (ish)

A while back I requested a solution to reversing the order of repeaters. Repeaters are always added to the bottom of the list, which for certain implementations is not ideal.

I worked out a solution: You can reverse the order of the repeaters on the front-end using flex box techniques.

Set the parent element of the repeaters to 'display: flex', then specify the flex-direction and flex-wrap properties to reverse. e.g..

If you have a single column of repeaters (e.g. a small news feed):

.repeaterParentSingleColumn {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
}

Obviously requires support for flex box from the browser, but saves a lot of juggling perch-side.

Reversing the order of rows isn't as straightforward as it will not wrap as you expect. Try using javascript to manipulate the dom for this:

var list = $('ul'); 
var listItems = list.children('li');
list.append(listItems.get().reverse());

Replace the ul and li with the respective parent and child elements.
Tony Astley

Tony Astley 0 points

  • 3 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

3 years ago

Hello Tony,

You can reverse the order in PHP. If you are working with a content region, you can use something like this:

perch_content_custom('Region', [
    'each' => function($item) {
        $item['repeater_id'] = array_reverse($item['repeater_id']);
        return $item;
    }
]);
Tony Astley

Tony Astley 0 points

3 years ago

Very useful, thanks Hussein.