0

Still converting my D6 theme to D8 and I need to override the HTML output for a custom field in a node twig template. After some readings, I don't find an example for this. My field contain files and I want them to display in a HTML list instead of a div + span. So I created a file named field--field-fichier-joint.html.twig and added inside the code from this post , but I get a WSOD. This is my actually code:

{% extends "@stable/field/field.html.twig" %}

{# Create classes array #}
{% set classes = [] %}

{# BEM inspired class syntax: https://en.bem.info/
   Enable this code if you would like field classes like "article__tags", where article is the content type and field_tags is the field name.
{% set classes = classes|merge([
  bundle ~ '__' ~ field_name|replace({'field_' : ''})|clean_class
]) %}
#}

{% set attributes = attributes.addClass(classes) %}

{#
  Ensures that the visually hidden option for field labels works correctly.
  @todo: Remove when https://www.drupal.org/node/2779919 is resolved.
#}
{% set title_attributes = title_attributes.addClass(label_display == 'visually_hidden' ? 'visually-hidden') %}
<ul>
  {% for item in items %}
      <li>{{ item.content }}</li>
  {% endfor %}
</ul>

If someone can help me. Thanks

EDIT: 4k4 solution work fine but I need to add some classes and I saw a very smart solution but I need help to use it. This is here

EDIT2: adding classes work but how can specify which one to apply to an element ? Then when I want to add some flexibility to the code with this:

{# Définition des variables et classes #}
{%
  set classes = classes ?: [
    'field',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class
  ]
%}
{% set wrapper_element = wrapper_element ?: 'ul' %}

{% set element = element ?: 'li' %}

{# Mise en forme sortie HTML #}
<{{ wrapper_element }}{{ attributes.addClass(classes) }}>
  {% for item in items %}
      <{{ element }}>{{ item.content }}</{{ element }}>
  {% endfor %}
</{{ wrapper_element }}>

I get Multiple items like this, why ?:

< Un fichier joint pour test Autre fichier test > Un fichier joint pour test Un fichier joint pour test Autre fichier test > < Un fichier joint pour test Autre fichier test > Autre fichier test Un fichier joint pour test Autre fichier test >

2- Adding classes I want to add classes to my HTML output, in particular, the odd/even and I found this code but only odd class is applied:

{%
  set li_classes =  classes ?: [
    'field__li',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class,
    'ligne__' ~ cycle(['odd', 'even'], loop.index0),
  ]
%}

then, my li classes inherit from ul classes, how can I avoid this ? This code work better but the cycle loop result is out of the class..

 <li {{ attributes.addClass(li_classes) }}{{ cycle(['odd', 'even'], loop.index0)}}>{{ item.content }}</li>

render:

<li class="field__ul field--fichier-joint field__li ligne__odd" odd="">
</li>
<li class="field__ul field--fichier-joint field__li ligne__odd" even="">
</li>

EDIT: the Final code

{# Les classes a jouter à la liste UL #}
{%
  set ul_classes = classes ?: [
    'field__ul',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class
  ]
%}

{# Mise en forme HTML #}
<ul {{ attributes.addClass(ul_classes) }}>
  {% for item in items %}
      {# Les classes a jouter aux lignes LI #}
{%
  set li_classes =  classes ?: [
    'field__li',
    'field--' ~ field_name|replace({'field_' : ''})|clean_class,
    'ligne__' ~ cycle(['odd', 'even'], loop.index0),
    ]
%}
      <li {{ item.attributes.addClass(li_classes) }}>{{ item.content }}</li>
  {% endfor %}
</ul>
  • See edit, added classes to the ul tag. – 4k4 Apr 6 '17 at 9:43
  • Your code is too complicated for the start, I've added a more basic example for zebra classes. – 4k4 Apr 6 '17 at 13:55
1

You only need the twig content between <ul> ... </ul>. The variables you set are not used anywhere. And you don't need to extend the field template from the base theme to override it. Only if you want to replace twig blocks.

field--field-fichier-joint.html.twig

{%
  set classes = [
    'class1',
    'class2',
  ]
%}

<ul{{ attributes.addClass(classes) }}>
  {% for item in items %}
      {% set zebra = cycle(['odd', 'even'], loop.index0) %}
      <li{{ item.attributes.addClass(zebra) }}">{{ item.content }}</li>
  {% endfor %}
</ul>

If you still get an WSOD enable error reporting to see in which file and line number the error occurs.

  • Thanks, so I just need to put this code in my template ? I found this very interesting tuto about extending field twig template but when I do that all of others fields (twig blocks) are affected...how can I do to use this more extendible way in future ? olsondigital.com/blog/code/… before I go to test your way ;) – webmaster pf Apr 6 '17 at 9:03
  • If you still get an WSOD enable error reporting to see in which file and line number the error occurs. >> How can I do that ? – webmaster pf Apr 6 '17 at 9:06
  • 1
    /admin/config/development/logging – 4k4 Apr 6 '17 at 9:16
  • thanks but I would to understand why my code doesn't work ? and what the item.attributes do ? instead of attributes alone. – webmaster pf Apr 6 '17 at 14:03
  • item.attributes is the predefined attributes object for the field item. Always use this, because it may contain useful attributes from other modules. For example if you enable quickedit and don't use the correct attributes in your templates it won't work. (don't think you need the item attributes for this, but who knows what modules you use in the future) – 4k4 Apr 6 '17 at 14:10

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.