2

I created a custom twig file that outputs a few basic fields, such as images and text. Here's what my twig file looks like:

<div class="image">
    {{content.field_image}}
</div>

<div class="year">
    {{content.field_year}}
</div>

<div class="heading-text">
    <h3>{{content.field_heading_text}}</h3>
</div>

I'm trying to have a little more control of the HTML that gets output. Here's what I'm seeing for a few of these fields:

enter image description here enter image description here

I want to either, A, get rid of the div element that outputs "1963" or "Imagining a better world" or, B, get control over the div element so I can add a class to it and later style it.

Thank you in advance!

5

The easiest way to avoid the standard field divs is to only print out the first delta. That works well for single-value fields, for multiple, you'd need to loop over it yourself.

So, just do this: {{ content.field_year.0 }} and it will only print out the actual field content, without the wrapping field type. Might not work for every formatter, depending on what they do, but it should work for most of them.

4

The theme debug info in the source gives you a hint. If you want control of how certain fields are displayed you can create templates for them using a filename that refers to that specific field. For example if we wanted to change the output of the year we could create

field--field-year.html.twig

in the templates folder of your theme. First I would copy the default contents of the core field.html.twig file into field--field-year.html.twig first. You can find the default field template in /core/themes/classy/templates/field/field.html.twig. In case you can't find it the contents are

{#
/**
 * @file
 * Theme override for a field.
 *
 * To override output, copy the "field.html.twig" from the templates directory
 * to your theme's directory and customize it, just like customizing other
 * Drupal templates such as page.html.twig or node.html.twig.
 *
 * Instead of overriding the theming for all fields, you can also just override
 * theming for a subset of fields using
 * @link themeable Theme hook suggestions. @endlink For example,
 * here are some theme hook suggestions that can be used for a field_foo field
 * on an article node type:
 * - field--node--field-foo--article.html.twig
 * - field--node--field-foo.html.twig
 * - field--node--article.html.twig
 * - field--field-foo.html.twig
 * - field--text-with-summary.html.twig
 * - field.html.twig
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - multiple: TRUE if a field can contain multiple items.
 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item's content.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 *
 * @see template_preprocess_field()
 */
#}
{%
  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 %}
    {% for item in items %}
      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ attributes.addClass(classes) }}>
    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
    {% if multiple %}
      <div class="field__items">
    {% endif %}
    {% for item in items %}
      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
    {% endfor %}
    {% if multiple %}
      </div>
    {% endif %}
  </div>
{% endif %}

Once you copy and paste that into your field--field-year.html.twig you can start editing it however you want. If you change

 <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>

to

{{ item.content }}

It will output only the content of the field not the surrounding div or classes.

0
cp themes/custom/aqair/templates/field/field.html.twig themes/custom/aqair/templates/field/field-string.html.twig

Or any of the other suggestions noted in your twig debug, then just edit the template to not include the surrounding div element.

Clear your cache drush cr

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.