1

I have a "page" node with a paragraphs field field-ref-para-multi and the corresponding template field--node--field-ref-para-multi--page.html.twig.

And I have some paragraphs types that can be used in this field:

para_a

para_b

para_c

I have to place a surrounding html structure in the field depending of the paragraphs types that are used inside.

{# type a #}
<div class="js-para_a">
{% if multiple %}
    {% for item in items %}
        {{item.content}}
     {% endfor %}
{% else %}
    {% for item in items %}
        {{item.content}}
    {% endfor %}
{% endif %}
</div>

{# type b #}
<ul class="js-para_b">
{% if multiple %}
    {% for item in items %}
        <li>{{item.content}}</li>
     {% endfor %}
{% else %}
    {% for item in items %}
        <li>{{item.content}}</li>
    {% endfor %}
{% endif %}
</ul>

But how to get the type of the used paragraphs in the field template?

  • This questions is referenced from d8cards, it deserves some upvotes! – Will Mar 8 '19 at 21:13
2

I think you can wrap each paragraphs field in any html wrapper of your choice, but you have to edit each field by modifying the appropriate field.html.twig template file.

In the field template suggested name, for example:

FILE NAME SUGGESTIONS: * field--paragraph--field-text-half--text-svg.html.twig x field--paragraph--field-text-half.html.twig * field--paragraph--text-svg.html.twig * field--field-text-half.html.twig * field--text-long.html.twig * field.html.twig

You will then use the template suggested name to edit the html wrapper of your choice.

Like this :

{% if label_hidden %}
  {% if multiple %}
    <div{{ attributes }}>
      {% for item in items %}
        <div{{ item.attributes }}>{{ item.content }}</div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
      <div{{ attributes }}>{{ item.content }}</div> --> change div to preferred  html
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ attributes }}>
    <div{{ title_attributes }}>{{ label }}</div>
    {% if multiple %}
      <div>
    {% endif %}
    {% for item in items %}
      <div{{ item.attributes }}>{{ item.content }}</div>
    {% endfor %}
    {% if multiple %}
      </div>
    {% endif %}
  </div>
{% endif %}

Hope this helps :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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