Skip Navigation

[Resolved] Targetting View item with [wpv-item index=""]

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

Problem:
The customer wants to target and apply different code to specific items in a View loop, specifically targeting items 1-6 with one code and items 7 and beyond with a different code (including adding a data attribute for lazy load).

Solution:
We suggested using the [wpv-loop-index] shortcode along with the [wpv-conditional] shortcode to conditionally apply code to items based on their index within the View loop. The provided example shows how to use these shortcodes to target items with an index less than or equal to 6 with one code and items with an index greater than 6 with another code that includes the lazy load attribute.

For example:

[wpv-layout-start]
    [wpv-items-found]
 
        <!-- Target items with index less than or equal to 6 -->
        [wpv-conditional if="( '[wpv-loop-index]' le '6')"]
            <div class="item">
                <!-- Your code for items 1-6 -->
            </div>
        [/wpv-conditional]
 
        <!-- Target items with index greater than 6 -->
        [wpv-conditional if="( '[wpv-loop-index]' gt '6')"]
            <div class="item" data-lazy="true">
                <!-- Your code for items with lazy load attribute -->
            </div>
        [/wpv-conditional]
 
    [wpv-no-items-found]
        <p>No items found</p>
    [/wpv-items-found]
[wpv-layout-end]

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

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.

Our next available supporter will start replying to tickets in about 5.94 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Sao_Paulo (GMT-03:00)

This topic contains 1 reply, has 2 voices.

Last updated by Mateus Getulio 3 months, 3 weeks ago.

Assisted by: Mateus Getulio.

Author
Posts
#2708274

Hi there,

I understand you can target certain items in a view with:

[wpv-item index="n"]

Please could you help? I'm looking to target all items up to, for example, 1-6, then further items I want to target and add a data attribute for lazy load. Would I have to target each one up to number 6 then use [wpv-item index=other] i.e.

[wpv-item index="1"]
Same Code
[wpv-item index="2"]
Same Code
[wpv-item index="3"]
Same Code
...etc... then
[wpv-item index=other]
Slightly different code

Or is there a simpler way of doing this?

Many thanks

#2708363

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello Paul. Thank you for contacting the Toolset support.

Toolset Views/Blocks offers the shortcode [wpv-loop-index] that will return the current loop index within the views loop.
=> https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-loop-index

You can use this shortcode in conjunction with [wpv-conditional] shortcode to apply specific rules to those items up to a certain index and then great than that index.

For example:

[wpv-layout-start]
    [wpv-items-found]

        <!-- Target items with index less than or equal to 6 -->
        [wpv-conditional if="( '[wpv-loop-index]' le '6')"]
            <div class="item">
                <!-- Your code for items 1-6 -->
            </div>
        [/wpv-conditional]

        <!-- Target items with index greater than 6 -->
        [wpv-conditional if="( '[wpv-loop-index]' gt '6')"]
            <div class="item" data-lazy="true">
                <!-- Your code for items with lazy load attribute -->
            </div>
        [/wpv-conditional]

    [wpv-no-items-found]
        <p>No items found</p>
    [/wpv-items-found]
[wpv-layout-end]

Can you please try above code and tell me how that goes?

Best,
Mateus

#2708378

Great many thanks - that's perfect!

Paul