Skip Navigation

[Resolved] Different style for each wpv-item (four styles)

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

Problem: I have a View that displays results in 4 different styles. I would like to repeat the pattern of style 1, style 2, style 3, and style 4 in the results. Another ticket discusses a solution for repeating 2 styles: @https://toolset.com/forums/topic/changing-row-colors-in-a-view/
How can I extend this solution to work with 4 styles in a repeating pattern?

Solution: Use wrap="4" to indicate you want to repeat the pattern every 4 items in the results, and use the wpv-item shortcode to define each iteration of the 4-item loop.

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <wpv-loop wrap="4" pad="true">
        [wpv-item index=1]
            <div class="style-red">[wpv-post-body view_template="Loop item in Styled View"]</div>
        [wpv-item index=2]
            <div class="style-green">[wpv-post-body view_template="Loop item in Styled View"]</div>
        [wpv-item index=3]
            <div class="style-blue">[wpv-post-body view_template="Loop item in Styled View"]</div>
        [wpv-item index=4]
            <div class="style-yellow">[wpv-post-body view_template="Loop item in Styled View"]</div>
    </wpv-loop>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

Relevant Documentation:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-item

This support ticket is created 3 years, 8 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)

This topic contains 2 replies, has 2 voices.

Last updated by pierre-yvesC 3 years, 8 months ago.

Assisted by: Christian Cox.

Author
Posts
#1987607
Capture d’écran, le 2021-03-15 à 12.05.30.png

Hi,

the workaround explained here https://toolset.com/forums/topic/changing-row-colors-in-a-view/ allow us to switch between two styles of wpv-items.

Is there a way to have more than 2 styles? I would like to have 4 different styles.

Thx

#1988261


the workaround explained here https://toolset.com/forums/topic/changing-row-colors-in-a-view/ allow us to switch between two styles of wpv-items. Is there a way to have more than 2 styles? I would like to have 4 different styles.

Hello, yes you can use wrap="4" and extend the loop variations like this:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <wpv-loop wrap="4" pad="true">
        [wpv-item index=1]
            <div class="style-red">[wpv-post-body view_template="Loop item in Styled View"]</div>
        [wpv-item index=2]
            <div class="style-green">[wpv-post-body view_template="Loop item in Styled View"]</div>
        [wpv-item index=3]
            <div class="style-blue">[wpv-post-body view_template="Loop item in Styled View"]</div>
        [wpv-item index=4]
            <div class="style-yellow">[wpv-post-body view_template="Loop item in Styled View"]</div>
    </wpv-loop>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

Add wpv-item blocks for each new style you want to add to the repeating structure. For now, wrap=4 so there are 4 wpv-item blocks.

#1989007

Amazing, many thx!!