Hello, there's nothing built-in to Blocks that would help you add an index number to each instance of a repeated custom field in the output for that field value. I think you would have to use the legacy wpv-for-each Views shortcode approach here, along with a custom shortcode. If you're not aware of the wpv-for-each shortcode, you can find out more about it here: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-for-each
If you'd like to explore that shortcode approach, we can discuss some ideas. First, you need a way to output the number next to the week. That number should increment for each iteration of the wpv-for-each loop. I have a custom shortcode you can use for this purpose, called wpv-index. Add this code in your child theme's functions.php file, or add it to a new custom code snippet in Toolset > Settings > Custom Code tab:
add_shortcode('wpv-index', function () {
static $i = 1;
$n = $i++;
return $n;
});
Once you have added that code, you will have the ability to place the new wpv-index shortcode inside a wpv-for-each shortcode setup like so:
[wpv-for-each field='wpcf-slug']
<a href="[types field='slug' output='raw'][/types]">Week [wpv-index]</a>
[/wpv-for-each]
Replace slug in both places with the actual slug of the file field. This should output a list of the file links like so:
Week 1 Week 2 Week 3 Week 4
You could also add that pipe character and space to separate each link. Insert the pipe character and space characters before and after it:
<a href="[types field='slug' output='raw'][/types]">Week [wpv-index]</a> |
That modification will produce output like this:
Week 1 | Week 2 | Week 3 | Week 4 |
The tricky part is removing that vertical line (a.k.a. a "pipe" character) after the last week. Conditionals don't work inside wpv-for-each content, so the net result of the wpv-for-each solution is there is no simple way to insert that pipe character between elements using text. Instead, you could consider a CSS-based solution, where instead of text character separators you implement CSS borders. Maybe you use something like span tags that wrap each Week link, and apply to those spans:
- display:inline-block;
- border-left: 1px solid black;
That gives all the elements a left border, but you would not want a border on the first element. So you would have to turn it off using nth-child, first-child, or sibling selectors somehow? Similar to the approach here:
https://stackoverflow.com/questions/40094376/applying-border-right-to-all-elements-except-the-last-one/40094468
<div class="week-list">
[wpv-for-each field='wpcf-slug']
<span class="week"><a href="[types field='slug' output='raw'][/types]">Week [wpv-index]</a></span>
[/wpv-for-each]
</div>
.week-list .week {
display: inline-block;
border-left: 1px solid black;
}
.week-list .week:first-child {
border-left: none;
}
Just throwing some ideas out there, since what you want to achieve isn't exactly possible in the system as-is. Your thoughts?
