Counter variable when using wpv-for-each

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

Problem: I would like to output an index value when looping over a repeating field instanced with wpv-for-each.

Solution: You'll need a custom shortcode to do this. Add the following custom shortcode definition in your child theme's functions.php file, or in a new snippet in Toolset > Settings > Custom Code.

add_shortcode('wpv-index', function () {
 
    static $i = 0;
    $n = $i++;
     
    return $n;
});

That will create a shortcode wpv-index, which we can use in the wpv-for-each loop to create these carousel-indicators list items.

Next, use wpv-for-each to iterate over the fotografia field instances and generate the indicator list items:

[wpv-for-each field='wpcf-fotografia']
<li data-target="#carousel" data-slide-to="[wpv-index]"></li>
[/wpv-for-each]

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

Tagged: Toolset Blocks, Types fields API, Types plugin, Views API, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Cesar 4 years, 3 months ago.

Assisted by: Christian Cox.

Author

Posts

January 2, 2021 at 5:34 pm #1892731

Cesar

Tell us what you are trying to do?

I'm using Fields block to create a custom slider for multiples Images field
I use [wpv-for-each] to get every image and some js code to make the first one active

I need to have a carousel indicator and those need to link to the data atribute of the slide

<li data-target="#carousel" data-slide-to="0" class="active"></li>

What I'm missing is a way to have a count that will output a number from 0 to the total of Fileds in the post type.

I've try a custom shortcode using the toolset congig options but I can`t manage to make it work

Would really appreciate if you can help me generating the code that will output the value (0,1,2,n) each time the loop is traversed

Thanks

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">

  <div class="carousel-inner" role="listbox">
    [wpv-for-each field="wpcf-fotografia"]
    <div class="carousel-item">
[types field='fotografia' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='1786' height='1322' resize='crop' separator=', '][/types]
    </div>
    [/wpv-for-each]
  </div>
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
  </ol>

January 3, 2021 at 5:23 pm #1893271

Christian Cox

Hi, it sounds like you need a way to output the carousel-indicators list items programmatically. I think you could use a custom shortcode to help create an automatic index value and output it in the data-slide-to attribute. First, please add this custom shortcode to your child theme's functions.php file, or a custom code snippet in Toolset > Settings > Custom Code:

add_shortcode('wpv-index', function () {

    static $i = 0;
    $n = $i++;
    
    return $n;
});

That will create a shortcode wpv-index, which we can use in the wpv-for-each loop to create these carousel-indicators list items.

Next, use wpv-for-each to iterate over the fotografia field instances and generate the indicator list items:

[wpv-for-each field='wpcf-fotografia']
<li data-target="#carousel" data-slide-to="[wpv-index]"></li>
[/wpv-for-each]

That should output a list of indicators for each fotografia field instance. Based on your description, it sounds like you are using JavaScript to append the "active" class to the first list item instance. That is probably the easiest way to handle assigning the "active" class here, since conditionals are not fully supported inside wpv-for-each.

Let me know if you have questions about this, or if I've misunderstood what you want to accomplish.

January 7, 2021 at 5:59 pm #1897751

Cesar

This is exactly what I was looking for!
Thanks