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?

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

6

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

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.