Help with getResources and content in columns

Support Extras
1

Hi
I’m trying to display content from Collections into columns like this…

<div class="column”>
    item 1
    item 5
    item 9
</div>
<div class="column”>
    item 2
    item 6
    item 10
</div>
<div class="column”>
    item 3
    item 7
    item 11
</div>
<div class="column”>
    item 4
    item 8
    item 12
</div>

After reading a few forum posts I though I could do it using getResources and tpl_N. So I have this:

[[!getResources?
&parents=[[*id]]
&depth=1
&showHidden=1
&includeTVs=sale-image
&processTVs=1
&tvPrefix=``
&tpl=saleImageTpl
&tpl_2=saleImageTpl-2
&tpl_3=saleImageTpl-3
&tpl_4=saleImageTpl-4
&includeContent=1
&limit=12
&sortby=menuindex
&sortdir=ASC
]]

With the chunks as so…
[[$saleImageTpl]]

< a href="[[~[[+id]]]]" title="[[+pagetitle]]">
    < img src="[[+sale-image]]" alt="[[+pagetitle]]" style="width:100%">
< /a>

And each [[$saleImageTpl-n]]…

< /div>
< div class=“column” >2
[[$saleImageTpl]]

With 6 items uploaded to the Collections container the following is rendered…

item 2
item 2 item 5 item 6

So 1 item in the first 3 columns and 3 in the 4th column with ‘item 2’ displaying in cols 2, 3 & 4!
Confused!
Can anyone point me in the right direction?
Thanks
J

2

I believe you have to call getResources four times to get the result you want.
In each call to getResources set one of the templates (&tpl, &tpl_2, …) to saleImageTpl and the rest of them to an empty chunk.

Or, if you have some experience with programming in PHP, it’s probably easier/cleaner to write a custom snippet (or duplicate getResources and make some adjustments).

3

Thanks for your reply.
I’ll try using 4 getResources and report back.
It seems from this thread that it can be done without the need for a snippet:

4

I believe the output from the thread you linked to would look like this

<div class="column">
    item 1
    item 2
    item 3
</div>
<div class="column">
    item 4
    item 5
    item 6
</div>
<div class="column">
    item 7
    item 8
    item 9
</div>
<div class="column">
    item 10
    item 11
    item 12
</div>

where the order of the items is still from 1 to 12 sequentially.

5

Except I want Item 1 to display in the first column, Item 2 in the second, Item 3 in the third, Item 4 in the fourth and then back to column1 for Item 5, column 2 for Item 6 etc.
Does that make sense?
Thanks

6

That is why you have to call getResources 4 times:

<div class="column">
[[!getResources?
...
&tpl=`tpl_column1`
]]
</div>
<div class="column">
[[!getResources?
...
&tpl=`tpl_column2`
]]
</div>
...

with chunks tpl_column1 to tpl_column4 like this:

tpl_column1

[[+idx:mod=`4`:eq=`1`:then=`<a href="[[~[[+id]]]]" title="[[+pagetitle]]">< img src="[[+sale-image]]" alt="[[+pagetitle]]" style="width:100%"></a>`:else=``]]

tpl_column2

[[+idx:mod=`4`:eq=`2`:then=`<a>...</a>`:else=``]]

tpl_column3

[[+idx:mod=`4`:eq=`3`:then=`<a>...</a>`:else=``]]

tpl_column4

[[+idx:mod=`4`:eq=`0`:then=`<a>...</a>`:else=``]]
7

Are the number of items alway’s 12?
If so, then you could do this without programming:

Use this option in getResources: toSeparatePlaceholders
This wil create a placeholder for each item, then use those placeholders in your template, that way you can put the first in the first column the 2nd in the 2nd, etc etc.

<div class="column”>
    [[+item0]]
    [[+item4]]
    [[+item8]]
</div>
<div class="column”>
   [[+item1]]
    [[+item5]]
    [[+item9]]
</div>
<div class="column”>
    [[+item2]]
    [[+item6]]
    [[+item10]]
</div>
<div class="column”>
    [[+item3]]
    [[+item7]]
    [[+item11]]
</div>

The iterator starts with 0

2 Likes
8

That’s done it thanks.
Weirdly, in order for the fourth column to work I had to have:

[[+idx:mod=`5`:eq=`4`:then=`…

Rather than:

[[+idx:mod=`4`:eq=`4`:then=`…

I’ve not used the modulus before but thanks for taking the time to help me to the solution :+1:

9

Thanks @dimmy for posting this option. This would also work.
Cheers

10

Dimmys suggestion should be more performant, since it needs only one call and doesn’t need conditional output-filters

11

Are you sure this works? This expression is true for the indices 4, 9, 14, 19, … (every time the index divided by 5 has a remainder of 4)

I’m pretty sure you have to use [[+idx:mod=`4`:eq=`0`:then= (like I wrote in my post above)!

12

No you’re right:-) I didn’t fully understand how that was working.
Thanks again for your help.

13

I think you’re making this more complicated than it needs to be. You don’t need getResources to do anything for you other than list the items each in its own div. Then use CSS to create whatever columns you need. Here’s a Codepen showing how to do this using either Flexbox or Grid. (I suggest aiming for a responsive layout as 4 columns is unlikely to work well on mobile.)

1 Like
14

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.