How to display a comma-separated list of multiple field values?

Question

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?

Answer 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

Answer 2

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 %}

Answer 3

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

Answer 4

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 %}

Answer 5

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.