Understanding Index Attribute

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to display the results of my View in rows and columns of 3. The "split" feature doesn't seem to be doing what I want.

Solution: Use the "split" feature to split the results into a number of groups, but use the "wrap" feature to split the results into repeating groups of a specific number.

[wpv-layout-start]
[wpv-items-found]
     <wpv-loop wrap="3" pad="true">
        [wpv-item index=1]
        <div class="row"> <!-- Open the row -->
            <div class="col-sm-4">First column</div>
        [wpv-item index=2]
            <div class="col-sm-4">Second column</div>
        [wpv-item index=3]
            <div class="col-sm-4">Third column</div>
        </div><!-- Close the row -->
        [wpv-item index=pad]
            <div class="col-sm-4">Pad second column</div>
        [wpv-item index=pad-last]
            <div class="col-sm-4">Pad last column</div>
        </div><!-- Close the row -->
     </wpv-loop>
[/wpv-items-found]
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No featured ads to display</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

Relevant Documentation:
https://toolset.com/documentation/user-guides/digging-into-view-outputs/

This support ticket is created 6 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 6 years, 3 months ago.

Assisted by: Christian Cox.

Author

Posts

August 15, 2018 at 1:13 pm #1083759

viktorI

Hello, i'm trying to create 3 column layout.
On the third loop i need to add separator (divider).

In my understanding, i need to user index=split3

so i'm thinking my code would be something like this:
<wpv-loop>
[wpv-item index=other]
[wpv-post-title],
[wpv-item index=split3]
[wpv-post-title]<br/>
</wpv-loop>

Hopefully i got the result
1,2,3
4,5,6

But instead i got the result
1
2
3,4
5
6,

So, i turn out using this approach to have correct result:
<wpv-loop>
[wpv-item index=split3]
[wpv-post-title],
[wpv-item index=other]
[wpv-post-title]<br/>
</wpv-loop>

Isn't index=split3 will only focus on the third item on every loop ? Help me understand this...

Thanks

August 15, 2018 at 4:58 pm #1083920

Christian Cox

I think you're using "split" incorrectly. Split does not separate the results into groups of 3, it separates the results into 3 groups. Instead you should use the "wrap" attribute to specify how many columns are in a row, then use the index, pad and pad-last shortcodes to add closing tags or divider elements. Like this:

[wpv-layout-start]
[wpv-items-found]
     <wpv-loop wrap="3" pad="true">
        [wpv-item index=1]
        <div class="row"> <!-- Open the row -->
            <div class="col-sm-4">First column</div>
        [wpv-item index=2]
            <div class="col-sm-4">Second column</div>
        [wpv-item index=3]
            <div class="col-sm-4">Third column</div>
        </div><!-- Close the row -->
        [wpv-item index=pad]
            <div class="col-sm-4">Pad second column</div>
        [wpv-item index=pad-last]
            <div class="col-sm-4">Pad last column</div>
        </div><!-- Close the row -->
     </wpv-loop>
[/wpv-items-found]
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No featured ads to display</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

Notice the "extra" closing div tags in the index=3 and index=pad-last items. This is required so that there will always be 3 cells in a row, and each row will always be closed, regardless of how many results are found.