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

[Author]

Posts

[zacharyL]

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>

[zacharyL]

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;
}

[Christian Cox]

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>

[zacharyL]

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.