Asset Management in Twig Templates

[mlweb]

Das ist aber m.E. ein ein wenig anderes Szenario. Der TO möchte das CSS nicht nur für ein bestimmtes Theme optimieren, sondern pro tatsächlich genutzte Art von Inhaltselementen auf der entsprechenden Seite.
Wenn also auf eine Seite keine Tabelle geladen wird, dann wird auch kein CSS für die Tabelle geladen. Auf einer zweiten Seite der gleichen Installtion ist aber vielleicht sehr wohl eine Tabelle geladen und dort wird dann auch das CSS für die Tabelle benötigt.
Zumindest habe ich das so verstanden.

[mdoll]

Ah ok, ja, das ist dann tatsächlich anders.

Frage ist, ob das von der Performance wirklich was bringt? Denn dann wäre da eine Grund-CSS und je nach aufgerufener Seite wird Zusatz-CSS geladen. Und bei jeder Seite mit Zusatz-CSS wäre das ein Extra-Request, den der Server verarbeiten muss. Ist es da von der Performance nicht besser, einmal nur eine optimierte CSS vom Browser laden zu lassen, die für den ganzen Webauftritt gilt?

[mlweb]

https://community.contao.org/de/showthread.php?89403-Asset-Management-in-Twig-Templates&p=604449&viewfull=1#post604449

Die Frage habe ich oben auch gestellt. Aber das kann man wahrscheinlich nur einschätzen, wenn man es sich konkret anschaut.

[Spooky]

Nicht unbedingt. Wenn der Client in seiner Session auf deiner Website nur 10% des CSS benötigt hat, dann wäre es besser gewesen, dass es einzeln ausgeliefert wird - und nur auf den Seiten, wo es benötigt wird.

[esc]

Ich denke Du kannst hier nicht extenden und musst das Template in dem Fall komplett überschreiben.

Dann werd ich das mal machen.

Danke für eure Hilfe und Überlegungen!
Am schönsten wär es natürlich eh wenn das individuelle CSS inline im Head geladen wird.

[derRenner]

eine etwas unkonventionelle Möglichkeit:

- öffne das Template Studio
- Suche nach dem Template content_element/templates und erstelle daraus über Variante erstellen ein Varianten-Template
- überschreibe den Inhalt mit

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

{# Adds a stylesheet #}
{% add "my_css" to stylesheets %}
    {% with {file: asset('styles.css')} %}
        {{ block('stylesheet_component') }}
    {% endwith %}
{% endadd %} 

- Speichern und Prod.Cache löschen
- im Backend an gewünschter Stelle - im gleichen Artikel, wo auch das Formular eingefügt wurde - ein Inhaltselement individuelles Template erstellen
- als Inhaltselement-Template das vorher erstellte Template auswählen.

[esc]

eine etwas unkonventionelle Möglichkeit:

- öffne das Template Studio
- Suche nach dem Template content_element/templates und erstelle daraus über Variante erstellen ein Varianten-Template
- überschreibe den Inhalt mit

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

{# Adds a stylesheet #}
{% add "my_css" to stylesheets %}
    {% with {file: asset('styles.css')} %}
        {{ block('stylesheet_component') }}
    {% endwith %}
{% endadd %} 

- Speichern und Prod.Cache löschen
- im Backend an gewünschter Stelle - im gleichen Artikel, wo auch das Formular eingefügt wurde - ein Inhaltselement individuelles Template erstellen
- als Inhaltselement-Template das vorher erstellte Template auswählen.

Danke für die Idee!

Ich weiß garnicht wo content_element/templates zum Einsatz kommt?
Außerdem darf es nicht notwendig sein ein extra Templat auszuwählen - da wäre eine größere globale CSS Datei noch die bessere Lösung.

[esc]

Ich habe jetzt eine eigenes Template "form_wrapper.html.twig" angelegt und darin lade ich das CSS File.

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

{% with {file: asset('files/assets/styles/content-elemente/form.css')} %}
{{ block('stylesheet_component') }}
{% endwith %}


Danke allen für die Unterstützung!

[Spooky]

{# templates/form_wrapper.html.twig #}
{% extends '@Contao/form_wrapper.html.twig' %}
{% use '@Contao/component/_stylesheet.html.twig' %}

{% add "foobar" to stylesheets %}
    {% with {file: asset('foobar.css')} %}
        {{ block('stylesheet_component') }}
    {% endwith %}
{% endadd %} 

Damit bekomm ich diesen Fehler:

A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag?

Hm ja stimmt, das geht dann doch nicht.

Ist übrigens ein Bug in Contao: https://github.com/contao/contao/pull/10086