Skip Navigation

[Resolved] 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 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 Cesar 11 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#1892731

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>
#1893271

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.

#1897751

This is exactly what I was looking for!
Thanks