Profile: Paul

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