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.
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 5 months ago.
Assisted by: Mateus Getulio.