it-swarm.com.de

Wie zeige ich eine durch Kommas getrennte Liste mehrerer Feldwerte an?

Wie kann ich zum Beispiel jeden Taxonomiebegriffswert als durch Kommas getrennte Inline-Liste rendern (oder zwischen jedem ein "/" Zeichen hinzufügen) in meiner Feldvorlage field--node--field-tags.html.twig Datei oder sogar visuell mit CSS?

4
Mojtaba Reyhani

Sie können CSS verwenden, um dies zu erreichen.

Zum Beispiel:

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

BEISPIEL DEMO

1
No Sssweat

Obwohl es möglich ist, CSS dafür zu verwenden, denke ich, ist es besser, es zu vermeiden. Ich habe das Feld vereinfacht twig Datei zur Veranschaulichung, aber es würde ungefähr so ​​aussehen:

{% for item in items %}
  {% if loop.last %}
    {% set separator = '' %}
  {% else %}
    {% set separator = '/' %}
  {% endif %}
  {{ item.content }}{{ separator }}
{% endfor %}
6
Rene

Ich habe Classys field.html.twig mit Renes Vorschlag in der Datei field - node - field-tags.html.twig kombiniert:

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