Custom Module List View in Columns Repeats Information

CMS > Custom Modules
1

https://frtc.trialsite.co/wc/waiting

In Custom Modules, how can I display list view in multiple columns (I am building with Foundation 6.5+) without repeating items multiple times? I am wanting a multi column view to display a large amount of items in a listing.

As-is:

01%20PM
Screen Shot 2019-02-08 at 5.05.01 PM.jpg1350Ɨ685 123 KB

What I want without repeated iterations:

46%20PM
Screen Shot 2019-02-08 at 5.05.46 PM.png1324Ɨ657 237 KB

2

Hey @NotAndyLincoln I donā€™t really use Foundationā€™s XY Grid, due to compatibility issues and overall bugginess, so I use the F6ā€™s Flex Grid (Iā€™d personally say the XY Grid is still a year out).

Anyways, when using Custom Modules, and if using F6 Flex Grid, do something like this:

<div class="row small-up-1 medium-up-2 large-up-3 align-center">
   {% insert your custom module with "list" as the view %}
</div>

Then, inside your Custom Modules Layouts, in ā€œListā€ or whatever you renamed it, add your:

    <div class="columns">
       <-- your own custom class and module list view content info -->
    </div>

Alternatively you can run a liquid FORLOOP and achieve same thingā€¦

    <div class="row small-up-1 medium-up-2 large-up-3 align-center">
     {% insert your custom module with layout "" as blank , and make sure to make it a collection object and add a collectionVariable %}
   {% for item in [collectionVariableName].items %}
      <div class="columns">
        <-- your own custom class and module list view content info, just change this to item -->
     </div>
{% endfor %}
</div>
3

Also you can wrap your list layout (create Custom List for example) withe the code:

{% assign itemModuleNumber = counter | modulo:  params.totalColumns  %}
{% if itemModuleNumber == 0 %}{% assign itemModuleNumber = params.totalColumns  %}{% endif %}
{% if itemModuleNumber == params.column %}
     **LIST LAYOUT GOES HERE** 
{% endif %}

And the just paste for example three columns of module items rendering like:

{% component source: "YourModule", layout: "Custom List", type: "module", limit: "21", column:"1", totalColumns:"3" %}
<br><br><br><br>
{% component source: "YourModule", layout: "Custom  List", type: "module", limit: "21", column:"2", totalColumns:"3" %}
<br><br><br><br>
{% component source: "YourModule", layout: "Custom  List", type: "module", limit: "21", column:"3", totalColumns:"3" %}

Using such implementation you will output 21 items into 3 columns

2 Likes
4

Oh I like that method!

5

Hi Guys

Iā€™ve just tried this on my site but no joy must be something Iā€™m missing I have images coming up so all good with that but just as one line going down the page. so Iā€™ve tried to add your coding so I have 3 images or four across the page but cant get it to work can you explain in more detail I have categorised
my images not sure if this is why.

6

Hi @Eddie and welcome!
Your CSS/HTML still needs to be setting the columns so they display as columns. The above code from Vlad just splits the data into ā€˜groupsā€™ and the code form Aaron utilises Foundations markup.

Are you using Foundation or any other CSS to format the columns?
If you can post a link Iā€™d be happy to take a look.

7

Hi Adam
Thanks for the reply. All I`ve done is used one of the templates from treepl and set up a custom module Iā€™ve got it working but as I said it just gives a single images going down the page. I was trying to get maybe 3 or 4 across the page with BC all you needed to do was add a number to their modules coding but with treepl trying to find out how it works is another process.
website is https://fibreglass-pools-melbourne.trialsite.co

8

Sorry the actual page is https://fibreglass-pools-melbourne.trialsite.co/small-pools

9

In BC, it generated the markup for you (for Galleries), and from memory I think it used tables.
In Treepl we have the freedom to use our own custom markup.

But, for that template you are using, try wrapping your component tags in a div like this:

<div class="row-holder">
    --YOUR COMPONENT TAG/S--
</div>
10

Ok thanks Adam Iā€™ll see what I can do.

11

Hi Adam
Bingo we have success.
I owe you a beer when I see you.
Cheers Eddie

1 Like