0

How is it possible to render also the html tags of a field collection item? If i do something like this in a textfield (Full html) of an item:

<div class="test">TEST</div>

I also get this in frontend, with no rendered html tags.

Node Theme:

<div id="accordion" class="panel-group">
{% for details in node.field_cv %}
<div class="panel panel-default">   
<div class="panel-heading">
<h4 class="panel-title">
<a class="panel-toggle " data-toggle="collapse" data-parent="#accordion" href="#content">
<span>{{ details.getFieldCollectionItem().field_cv_title.value }}</span>
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="content" class="panel-collapse collapse">
<div class="panel-body">
{{ details.getFieldCollectionItem().field_cv_details.value }}
</div><!-- /.panel-body -->
</div><!-- /.content -->
</div><!-- /.panel -->
{% endfor %}
</div>

Thanks for helping!

  • The build array to render the field collection items is in {{ content.field_cv }}, exactly how you have configured the field in the view mode. – 4k4 Sep 4 '17 at 13:54
  • Thanks @4k4 - I´m very new to Drupal 8, please can you describe it a bit more? – Da. Sep 4 '17 at 14:50
  • The view mode is set to Field Collection Items. – Da. Sep 4 '17 at 15:02
0

When you use Field Collection you get nested templates. So start with the outer div container in the node template:

<div id="accordion" class="panel-group">
  {{ content.field_cv }}
</div>

This produces a new set of templates, which you can see when you switch on Twig Debug. The next level is the field template:

field--field-cv.html.twig

{% 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>
    {% 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 %}

and inside you'll find the field collection templates:

field.collection.html.twig

{%
  set classes = [
    'field-collection-item',
    'field-collection-item--name-' ~ field_collection_item.name|clean_class,
    'field-collection-item--view-mode-' ~ field_collection_item.view_mode|clean_class,
  ]
%}
<div{{ attributes.addClass(classes) }}>
  <div class="content"{{ content_attributes }}>
    {{ content }}
  </div>
</div>

Which you all can use for the custom html markup.

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.