4

How can I render for example each taxonomy terms value as an inline comma-separated list (or add between each of them a "/" Character) in my field template field--node--field-tags.html.twig file or even visually with css?

0

5 Answers 5

1

You can use CSS to accomplish this.

For example:

HTML

<div class="field-items">
  <div class="field-item">
  Apple
  </div>
  <div class="field-item">
  Orange
  </div>
  <div class="field-item">
  Lemon
  </div>
</div>

CSS

.field-item {
  float: left; 

}

.field-item:after {
  content: ","; right: 3px; position: relative;
}

.field-item:last-child:after {
    content: none;
}

.field-item:last-child:before {
    content: " and ";
}

.field-item:first-child:before {
    content: none;
}

EXAMPLE DEMO

7

While it's possible to use CSS for this I think it's better to avoid it. I've simplified the field twig file to illustrate, but it would look something like this:

{% for item in items %}
  {% if loop.last %}
    {% set separator = '' %}
  {% else %}
    {% set separator = '/' %}
  {% endif %}
  {{ item.content }}{{ separator }}
{% endfor %}
1
  • 1
    This works perfectly and should be the accepted answer, since the question was for a comma-separated list. The CSS proposal just looks like one but, as you can see when you copy and paste the rendered result, it is far from being it.
    – Konstantin
    Jun 18, 2018 at 19:29
0

I combined Classy's field.html.twig with Rene's suggestion, in the file field--node--field-tags.html.twig:

{%
    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 %}
                {% if loop.last %}
                    {% set separator = '' %}
                {% else %}
                    {% set separator = ', ' %}
                {% endif %}
                <span{{ item.attributes.addClass('field__item') }}>{{ item.content }}</span>{{ separator }}
            {% endfor %}
        </div>
    {% else %}
        {% for item in items %}
            {% if loop.last %}
                {% set separator = '' %}
            {% else %}
                {% set separator = ', ' %}
            {% endif %}            <span{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</span>{{ separator }}
        {% 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 %}
            {% if loop.last %}
                {% set separator = '' %}
            {% else %}
                {% set separator = ', ' %}
            {% endif %}
            <span{{ item.attributes.addClass('field__item') }}>{{ item.content }}</span>{{ separator }}
        {% endfor %}
        {% if multiple %}
            </div>
        {% endif %}
    </div>
{% endif %}
0

You don't even need to do this on a theme level, you could use a display suite block field embedding a view of comma separated terms, if you wanted.

0

The https://drupal.stackexchange.com/a/238069/5501 should work.

However if you need to remove all markup from the output and ensure no whitespaces/new lines exists in it then it become tricky:

items|safe_join(', ')|preg_replace('/[\n\r]/', '')|replace({'  ': ''})|striptags|trim)

Let's break down the above:

  • safe_join filter iterates the list and trigger render/toString method to get item output, then joins all items by comma + whitespace
  • preg_replace filter used to remove all new lines
  • replace filter used to remove double whitespaces that were left from item's markup
  • striptags filter removes all tags in output
  • trim filter removes spaces from the start/end of the string

Note: preg_replace is used from Twig Tweaks module

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.