Skip Navigation

[Resolved] Conditional Output Using an Evens/Odds Argument?

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

Problem: I would like to modify the View's output so that odd and even rows have different markup.

Solution: In classic Views you can use the wrap, index, and pad-last settings to create different markup structures for different rows or iterations of the loop.

Relevant Documentation:
https://toolset.com/documentation/user-guides/views/digging-into-view-outputs/#loop-shortcode-wpv-item-and-the-index-parameter

This support ticket is created 2 years, 6 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: 

This topic contains 3 replies, has 2 voices.

Last updated by zacharyL 2 years, 6 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#1719949

Tell us what you are trying to do?

I'm trying to display a container when there are an odd number of posts output in the view, in relation to wpv-items-count, but hide it when there is an even number.

Is there a similar example that we can see?

Here is what the output would look like if there were an odd number of posts output in the view:
hidden link

What is the link to your site?
hidden link

I'm still in the process of building out the view, as there isn't anything styled out just yet, but a general answer will still be helpful here.

Here is my view markup:

<div id="products-loop-wrapper">
    <!-- wpv-loop-start -->
        <wpv-loop>
            <a href="[wpv-post-url]">
                <img src="[wpv-post-featured-image size='full' output='url']" alt="[wpv-post-title]" />
                <h4>[wpv-post-title]</h4>
            </a>
        </wpv-loop>
    <!-- wpv-loop-end -->
    [wpv-conditional if="( '[wpv-items-count]' eq 'odd' )"]
        <div class="odd-man-out">
            <img src="[wpv-bloginfo show='stylesheet_directory']/images/logo-inverse.svg" alt="[wpv-bloginfo]" />
        </div>
    [/wpv-conditional]
</div>
#1719985

Just to be clear, I did have a CSS solution, in the case there isn't a native way to handle this in Toolset's conditional arguments.

#products-loop-wrapper > a:nth-child(even) + div {
    display: none;
}
#1720161

Hello, since you're using the Classic View editor I will show you how you can use the loop's wrap, index, and pad-last settings to do this without the need for a conditional. You may have seen these features implemented by the Loop Wizard automatically if you are creating a Bootstrap grid, or a sortable table. Basically you will create separate markup to be used for different iterations of the loop. "Wrap" tells the loop we will process results in groups of a specific number, in this case two. Index=1 is the code we want to use for the first item in the group, and index=other is the code we want to use for the 2nd item in the loop. If only 1 item exists in a group (i.e., there were an odd number of results), index=pad-last will be used instead of the other two blocks. If you'd like to do more of a deep dive into these features, check out the documentation here: https://toolset.com/documentation/user-guides/views/digging-into-view-outputs/#loop-shortcode-wpv-item-and-the-index-parameter

Feel free to let me know if you have questions about this:

<div id="products-loop-wrapper">
    <!-- wpv-loop-start -->
        <wpv-loop wrap="2" pad="true">
            [wpv-item index=1]
            <a href="[wpv-post-url]">
                <img src="[wpv-post-featured-image size='full' output='url']" alt="[wpv-post-title]" />
                <h4>[wpv-post-title]</h4>
            </a>
            [wpv-item index=other]
            <a href="[wpv-post-url]">
                <img src="[wpv-post-featured-image size='full' output='url']" alt="[wpv-post-title]" />
                <h4>[wpv-post-title]</h4>
            </a>
            [wpv-item index=pad-last]
            <div class="odd-man-out">
                <img src="[wpv-bloginfo show='stylesheet_directory']/images/logo-inverse.svg" alt="[wpv-bloginfo]" />
            </div>
        </wpv-loop>
    <!-- wpv-loop-end -->
</div>
#1720757

I like being in complete control of my markup, so I have a tendency to avoid the wizards. I would have never discovered this feature without your assistance.

That worked brilliantly. Thanks so much for your help.