1

I'm using a template override for field.html.twig

I'm simply trying to generate a data-depth attribute that takes the index of the loop and multiplying it by 0.2.

Here is the Twig markup:

<div{{ attributes.addClass(classes, 'field--items') }}>
  {% for item in items %}
    {% set i = loop.index %}
    {% set depth = i * 0.2 %}
    <div {{ item.attributes.addClass('field--item') }} {{ attributes.setAttribute('data-type', 'test') }} {{ attributes.setAttribute('data-depth', depth) }}>
      {{ item.content }}
    </div>
  {% endfor %}
</div>

Here is the HTML output:

<div data-quickedit-field-id="paragraph/2/field_test/en/default" class="field field--name-field-test-image field--type-image field--label-hidden field--items">
  <div class="field--item" data-type="test" data-depth="0.2">
    <img src="/sites/default/files/2016-08/5.png">
  </div>
  <div class="field--item" data-type="test" data-depth="0.2">
    <img src="/sites/default/files/2016-08/4.png">
  </div>
  <div class="field--item" data-type="test" data-depth="0.4">
    <img src="/sites/default/files/2016-08/3.png">
  </div>
  <div class="field--item" data-type="test" data-depth="0.6">       
    <img src="/sites/default/files/2016-08/2.png">
  </div>
  <div class="field--item" data-type="test" data-depth="0.8">
    <img src="/sites/default/files/2016-08/1.png">
  </div>
</div>

As you can see the first two iterations are the same - they have 0.2 as the data-depth which is incorrect it, the sequence should be 0.2, 0.4, 0.6, 0.8 and 1.0. Is this is a bug with drupal? Or am I totally missing something here.

Thanks in advance.

3
  • Have you tried using loop.index0 instead?
    – Clive
    Commented Aug 12, 2016 at 13:47
  • Yep. Doesn't work. It states here that index0 starts the iteration with the initial value of 0. I don't want this. As i've used .index to start the iteration with value 1. twig.sensiolabs.org/doc/tags/for.html#the-loop-variable
    – cwiggo
    Commented Aug 12, 2016 at 13:55
  • Yeah I thought I'd read somewhere that you need to use index0 when working with zero-based php arrays. Must be mistaken
    – Clive
    Commented Aug 12, 2016 at 14:40

1 Answer 1

1

I just tested this and it works for me:

   {% for item in items %}
        {% set counter = ( counter | default(0) ) + 0.2 %}
        <div{{ item.attributes.addClass(item_classes) }} data-depth="{{ counter }}">{{ item.content }}</div>
      {% endfor %}

This renders as:

<div class="field field--name-field-gallery-ref" data-depth="0.2">
...
<div class="field field--name-field-gallery-ref" data-depth="0.4">
...

Note, I did not get the repeating depth numbers as you did above.

2
  • This works for me. Thanks. Any idea why my version wasn't working. I think it was maybe down to the use of the {{ attributes.setAttribute('data-depth', depth) }} code?
    – cwiggo
    Commented Aug 14, 2016 at 17:02
  • Welcome, I'm not sure but I'd agree with your assessment having to do with the attributes. Commented Aug 14, 2016 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.