0

I created 2 taxonomy entity-reference fields. One is Categories and one is Tags and some similar other fields.

In nodes, some of these taxonomy fields appear one above the other.

I want to give some padding-top and padding-bottom css code, not to each one - but to all together.

Yet, they don't sit inside a wrapping div and wrapping them through the SQL isn't quite comfortable, though I am not sure it's a minimalist/easy to supervise/safe solution.

Do you know a way to bias Drupal 8 to "pack" some of these into a div ? Maybe an intervention in the Twig could do that with some behavior-code?

2 Answers 2

1

This is the content of field.html.twig in the core theme classy:

{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
  ]
%}

{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{% if label_hidden %}
  {% if multiple %}
    <div{{ attributes.addClass(classes, 'field__items') }}>
      {% for item in items %}
        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
      {% endfor %}
    </div>
  {% else %}

Each field is packed into a div with its own class field--name-field-name. In your case field--name-field-tags and field--name-field-categories.

Steps for solution:

  1. If you don't use classy as base theme you can put somehting similar in your custom theme or simply copy this twig from the classy theme and change as needed.

    core/themes/classy/templates/field/field.html.twig -> themes/mytheme/templates/

  2. Flush all cache.

2
  • If I represent these fields in field.html.twig Drupal will prefer how they are customized there? I understand right? If so its very cool !!! I am just not sure what should be copied since each of the 3 parts above seems to deal with something different, can you please gracefully elaborate just on that point? Thx.
    – user16289
    Jul 26, 2016 at 13:39
  • You can copy the complete twig. The code example is only a part of it. See the edited answer
    – 4uk4
    Jul 26, 2016 at 14:00
1

Go to your theme's templates folder and edit node.html.twig

There, put:

<article{{ attributes }}>

  {{ title_prefix }}
  {% if not page %}
    <h2{{ title_attributes }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h2>
  {% endif %}
  {{ title_suffix }}

  {% if display_submitted %}
    <footer>
      {{ author_picture }}
      <div{{ author_attributes }}>
        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
        {{ metadata }}
      </div>
    </footer>
  {% endif %}

  <div{{ content_attributes }}>

    {{ content|without('title','body', 'field_categories', 'field_tags', 'field_otherfield') }}

    {{ content.title }}
    {{ content.body }}
    <div class="some-wrapper">
       {{ content.field_categories }}
       {{ content.field_tags }}
    </div>
    {{ content.field_otherfield }} 

  </div>

</article>

That will print these fields as they presented on this twig file ---> Packed in a div.

Notes:

  • If you want them without the label use {{ content.field_name[0] }}.

  • If you want only the label use {{ content.field_name['#title'] }}.

  • As always with templates, flush the cache to see changes.

15
  • 1
    If you print single fields you should also print the rest of the content {{ content|without('field1','field2',...) }}. Otherwise you loose the caching data.
    – 4uk4
    Jul 27, 2016 at 6:34
  • @4k4 I didn't know that, thx!
    – No Sssweat
    Jul 27, 2016 at 6:35
  • Hello @NoSssweat --- What I talk about deals with all content types... I need a global solution... I guess your shorten at least 40% of the answer in that case?...
    – user16289
    Jul 27, 2016 at 7:23
  • @Benia then name it node.html.twig to affect all content types.
    – No Sssweat
    Jul 27, 2016 at 7:25
  • I will just use the existing one and put it under body tag. Should the code be different and shorter than appears? Could you please use the field names "categories" and "tags" in your answer? Thank you anyway!!
    – user16289
    Jul 27, 2016 at 7:27

Your Answer

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