2

I have a field_category field and the field--default--node--field-category--insight.html.twig template is used to display the output of the field. I want to override the field link attribute.

The content of field--default--node--field-category--insight.html.twig is the following.

    {#
    /**
     * @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 %}
      <div{{ attributes.addClass(classes) }}>
        <div class="field__items">
          {% for item in items %}
            <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
          {% endfor %}
        </div>
      </div>
    {% else %}
      <div{{ attributes.addClass(classes) }}>
        <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
        <div class="field__items">
          {% for item in items %}
            <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

This template outputs the following.

    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'field' -->
    <!-- FILE NAME SUGGESTIONS:
       x field--default--node--field-category--insight.html.twig
       * field--default--node--insight.html.twig
       * field--default--node--field-category.html.twig
       * field--default--field-category--insight.html.twig
       * field--default--insight.html.twig
       * field--default--field-category.html.twig
       * field--default.html.twig
       * field--theme-ds-field-default.html.twig
       * field--node--field-category--insight.html.twig
       * field--node--field-category.html.twig
       * field--node--insight.html.twig
       * field--field-category.html.twig
       * field--entity-reference.html.twig
       * field.html.twig
    -->
    <!-- BEGIN OUTPUT from 'themes/custom/myproject/myproject_child/templates/field/field--default--node--field-category--insight.html.twig' -->
      <div data-quickedit-field-id="node/1/field_category/en/teaser" class="field field--name-field-category field--type-entity-reference field--label-hidden">
        <div class="field__items">
                  <div class="field__item"><a href="/myproject/insights/1" hreflang="en">Legal Services</a></div>
              </div>
      </div>

    <!-- END OUTPUT from 'themes/custom/myproject/myproject_child/templates/field/field--default--node--field-category--insight.html.twig' -->

    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'field' -->
    <!-- FILE NAME SUGGESTIONS:
       x field--default--node--field-category--insight.html.twig
       * field--default--node--insight.html.twig
       * field--default--node--field-category.html.twig
       * field--default--field-category--insight.html.twig
       * field--default--insight.html.twig
       * field--default--field-category.html.twig
       * field--default.html.twig
       * field--theme-ds-field-default.html.twig
       * field--node--field-category--insight.html.twig
       * field--node--field-category.html.twig
       * field--node--insight.html.twig
       * field--field-category.html.twig
       * field--entity-reference.html.twig
       * field.html.twig
    -->
    <!-- BEGIN OUTPUT from 'themes/custom/myproject/myproject_child/templates/field/field--default--node--field-category--insight.html.twig' -->
      <div data-quickedit-field-id="node/1/field_category/en/teaser" class="field field--name-field-category field--type-entity-reference field--label-hidden">
        <div class="field__items">
                  <div class="field__item"><a href="/myproject/insights/2" hreflang="en">Product Liability</a></div>
              </div>
      </div>

    <!-- END OUTPUT from 'themes/custom/myproject/myproject_child/templates/field/field--default--node--field-category--insight.html.twig' -->

I used the Pathauto module to generate the aliases for the category with the pattern /insights/[term:tid]. I have tried to use the question mark in the pattern to generate the path aliases like /insights?tid=[term:tid], but the question mark is not allowed by the module.

How do I rewrite the field attribute in <div class="field__item"><a href="/myproject/insights/2" hreflang="en">Product Liability</a></div> to make it <div class="field__item"><a href="/myproject/insights?tid=2" hreflang="en">Product Liability</a></div>?

2

You're just looking for the taxonomy term in your template, it can be found on the URL object like this:

  <div class="field__item"><a href="/myproject/insights?tid={{ item.content['#url'].routeParameters.taxonomy_term }}" hreflang="en">Product Liability</a></div>
|improve this answer|||||
2

I've used {{ kint(item.content) }} to debug the data like below.

 <div{{ attributes.addClass(classes) }}>
        <div class="field__items">
          {% for item in items %}
             {{ kint(item.content) }}
             ...
             ...

and i got the output like below

enter image description here

and I've updated the template file to get the output according to my requirement.

field--default--node--field-category--insight.html.twig

    {#
    /**
     * @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 %}
      <div{{ attributes.addClass(classes) }}>
        <div class="field__items">
          {% for item in items %}

          {% if item.content['#url'].routeParameters['taxonomy_term'] is defined %}

            <div{{ item.attributes.addClass('field__item') }}><a href="{{ base_path }}insights?tid={{ item.content['#url'].routeParameters['taxonomy_term'] }}">{{ item.content['#title'] }}</a></div>

           {% else %}

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

            {% endif %}

          {% endfor %}
        </div>
      </div>
    {% else %}
      <div{{ attributes.addClass(classes) }}>
        <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
        <div class="field__items">
          {% for item in items %}
            <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
|improve this answer|||||

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.