Twig-Template Anpassungen

Download-Element

• Svg-Icon
• Dateityp
• Dateigröße

Der Dateityp ist nicht unbedingt nötig, da die Dateierweiterung im Dateinamen enthalten ist. Der Typ kann nämlich auch mal sehr lang werden …

/templates/component/_download.html.twig

{% use "@Contao/component/_download.html.twig" %}

{#
    Adjust how any blocks of parent or used component templates are rendered.
    Try typing "block" or "use" to get autocompletion for available options.
#}

{%- block download_link_inner %}
  {{ source('svgicons/download.html5') }}
  {{ parent() }} ({{ download.file.mimeType|split('/')|last }} {{ download.file.fileSize|format_bytes }})
{% endblock -%}

Breadcrumb-Navigation

• SVG-Home-Icon ersetzt den Seitennamen bzw. den {{page::rootPageTitle}}

Dafür müssen wir im Twig-Template den ersten Listenpunkt identifizieren. Die erste Abfrage im Block {% if item.isActive %} bezieht sich auf die jeweils aktive Seite, d.h., das ist das letzte Item im Breadcrumb-Menü. Diese Abfrage bleibt unangetastet.

Im else-Zweig müssen wir dann abfragen, ob der Listenpunkt der erste ist. Das geht ganz einfach mit einer loop-Variable. Damit kann innerhalb einer for-Schleife nach speziellen Variablen gesucht werden. Hier suchen wir loop.first, und bei dieser ersetzen wir den Linktext durch ein Inline-SVG.

{% extends "@Contao/mod_breadcrumb.html.twig" %}

{#
    Adjust how any blocks of parent or used component templates are rendered.
    Try typing "block" or "use" to get autocompletion for available options.
#}

  {% block content %}
    <ul>
      {% for item in items %}
        {% if item.isActive %}
          <li class="active" aria-current="page">{{ item.link|insert_tag }}</li>
        {% else %}
          {% if loop.first %}
            <li><a href="{{ item.href|insert_tag }}">{{ source('svgicons/home.html5') }}</a></li>
          {% else %}
            <li><a href="{{ item.href|insert_tag }}">{{ item.link|insert_tag }}</a></li>
          {% endif %}
        {% endif %}
      {% endfor %}
    </ul>
  {% endblock %}