CODEWITHSUNDEEP
multiple-columnssilverstripe
pinkp
pinkp

Reputation: 455

SilverStripe 3.1: Divide list into vertical columns (variable length)

This may sound like an easy question but I'm a little stumped.

I've tried using Modulus and MultipleOf https://docs.silverstripe.org/en/3/developer_guides/templates/syntax/ but this is giving me a list which goes horizontal. I want two columns The first column containing the first half of my listed data objects and the second column the second half.

Using CSS doesn't work as it splits the content and ignores the li containers so some of my list items (which are multiple lines each) get divided. https://www.w3schools.com/Css/css3_multiple_columns.asp

Really I want to just be able to find the middle data object and divide it using html / css. Any suggestions welcome.

Here's an example of my list its shows 4 items, column 1 would contain item 1 & 2 and column 2, 3 & 4 (the actual list could be any length):

1 MAY 11 - 7.30PM - POWERSTOCK THE HUT, DT6 3TB BOX OFFICE: 01935 873555 / WEBSITE TICKETS: £10.00/£8.00

2 OCT 13 - THE PLACE BEDFORD BOX OFFICE: 01234 354321 / WEBSITE

3 OCT 14 - PREVIEW: THE PLACE BEDFORD BOX OFFICE: 01234 354321 / WEBSITE

4 OCT 18 - CHILWELL ARTS CENTRE BEESTON

Upvotes: 0

Views: 109

Answers (1)

UncleCheese
UncleCheese

Reputation: 1584

You need a custom iterator property. You have $First, $Last, and $Middle made available to you through the core, but $Middle doesn't do what most people expect. Rather than return true on the median iteration, it's just anything between the first and last one, which isn't often helpful.

class MyIteratorProperties implements TemplateIteratorProvider
{   
    protected $totalItems;

    protected $pos;

    public static function get_template_iterator_variables()
    {
        return ['Median'];
    }

    public function iteratorProperties($pos, $totalItems)
    {
        $this->pos = $pos;
        $this->totalItems = $totalItems;
    }

    public function Median()
    {
        return $this->pos == floor($this->totalItems/2);
    }

}

And your template:

<% $loop $SomeItems %>
    <% if $Median %></div><div ...><% end_if %>
<% end_loop %>

Upvotes: 2

Related Questions