Skip Navigation

[Resolved] First element loop

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

Problem:
The user wanted to style the first element in a grid view differently.

Solution:
Use the wpv-item shortcode and its index arguments, and use a different content template. The view code will, then, be:

<wpv-loop>
[wpv-item index=1]
      [wpv-post-body view_template="loop-item-in-test1-first-element-template"]
[wpv-item index=other]
      [wpv-post-body view_template="loop-item-in-test1"]
</wpv-loop>

Or you may use a wrapper div:

<wpv-loop>
[wpv-item index=1]
   <div class="first">
      [wpv-post-body view_template="loop-item-in-test1-first-element-template"]
   </div>
[wpv-item index=other]
   <div class="">
      [wpv-post-body view_template="loop-item-in-test1"]
   </div>
</wpv-loop>

Relevant Documentation:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-154400

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.

This topic contains 2 replies, has 2 voices.

Last updated by federicoA 1 year, 6 months ago.

Assigned support staff: Jamal.

Author
Posts
#1677145

Hello,
i have a simple loop
<wpv-loop>
[wpv-post-body view_template="loop-item-in-test1"]
</wpv-loop>
<!-- wpv-loop-end -->
and I have to identify the first element of the loop (i have to set a class in the first element).
I usually use a $ first variable with php. How can I manage it with the views?
thanks
federico

#1677801

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Hello frederico and thank you for contacting the Toolset support.

You can use the wpv-item shortcode and its index arguments, and use different content template. The view code will, then, be:

<wpv-loop>
[wpv-item index=1]
      [wpv-post-body view_template="loop-item-in-test1-first-element-template"]
[wpv-item index=other]
      [wpv-post-body view_template="loop-item-in-test1"]
</wpv-loop>

Or you may use a wrapper div:

<wpv-loop>
[wpv-item index=1]
   <div class="first">
      [wpv-post-body view_template="loop-item-in-test1-first-element-template"]
   </div>
[wpv-item index=other]
   <div class="">
      [wpv-post-body view_template="loop-item-in-test1"]
   </div>
</wpv-loop>

More about the shortcode here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-154400

I hope this helps. Let me know if you have any questions.

#1680011

My issue is resolved now. Thank you!