Contao-Camp 2024
Ergebnis 1 bis 26 von 26

Thema: Twig Template stylesheet einbinden

  1. #1
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard Twig Template stylesheet einbinden

    Über eine Frontend Route gebe ich ein Template aus.
    Mein template liegt in Resources -> contao-> views -> MyCustom -> fe_page.html.twig

    Ich möchte in den html Head ein Stylesheet einfügen und habe versucht fe_page zu extenden.


    PHP-Code:

    {% extends '@Contao/fe_page' %} 

    {% 
    block body %}

    <
    h1>Welcome to our Demo Homepage</h1>

    <
    p>Selected Fonts</p>
    <
    ul>
      {% for 
    tag in html_definition %}
      <
    li>{{ tag.heading_1 }}</li>
      <
    li>{{ tag.heading_2 }}</li>
      <
    li>{{ tag.heading_3 }}</li>
      <
    li>{{ tag.heading_4 }}</li>
      <
    li>{{ tag.heading_5 }}</li>
      <
    li>{{ tag.heading_6 }}</li>
      <
    li>{{ tag.strong }}</li>
      <
    li>{{ tag.paragraph }}</li>
      {% endfor %}
    </
    ul>

    {% 
    endblock %} 
    Bekomme aber bereits hier die Fehlermeldung :

    PHP-Code:
     Unable to find template \"fe_page\" (looked into: /var/www/contao.loc/vendor/knplabs/knp-menu/src/Knp/Menu/Resources/views, /var/www/contao.loc/templates) in \"@MyName/MyCustom/fe_page.html.twig\" at line 1. at /var/www/contao.loc/vendor/twig/twig/src/Loader/FilesystemLoader.php:250)"} [] 

    Diesen Block wollte ich dann in den head einfügen
    PHP-Code:

    {% block head %}
        <
    link
          href
    ="{{ asset('bundles/myname/css/my.css') }}"
          
    rel="stylesheet"
        
    />
    {% 
    endblock %} 

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Das geht erst ab Contao 4.12, soweit ich weiß. Contao 4.11 hat davon abgesehen schon das Lebensende erreicht.
    » sponsor me via GitHub or PayPal or Revolut

  3. #3
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Das geht erst ab Contao 4.12, soweit ich weiß. Contao 4.11 hat davon abgesehen schon das Lebensende erreicht.
    Okay. Wie render ich dann ein normales html5 template in einem Controller ?
    Finde dazu nichts in den Docs

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Das HTML5 Template muss sich bspw. in contao/templates/foobar.html5 befinden. Dann einfach nur
    PHP-Code:
    $template = new FrontendTemplate('foobar');
    $rendered $template->parse(); 
    ggf. musst du dir ContaoFramework injecten und initialisieren lassen.
    » sponsor me via GitHub or PayPal or Revolut

  5. #5
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Das HTML5 Template muss sich bspw. in contao/templates/foobar.html5 befinden. Dann einfach nur
    PHP-Code:
    $template = new FrontendTemplate('foobar');
    $rendered $template->parse(); 
    ggf. musst du dir ContaoFramework injecten und initialisieren lassen.
    Hast du einen links zu irgendeiner alter doc seite ?
    Geändert von Medy (06.12.2021 um 09:10 Uhr)

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Daten an das Template übergibst du so:
    PHP-Code:
    $template->foo 'foobar'
    Oder auch so:
    PHP-Code:
    $template->setData([
        
    'foo' => 'foobar',
    ]); 
    Die Daten sind dann im Template über
    PHP-Code:
    $this->foo 
    erreichbar. Ein ganz einfaches Beispiel existiert zB hier: https://docs.contao.org/dev/framewor...ments/#example
    Da es sich dabei aber um ein Inhaltselement handelt, wird dir hier bereits ein instanziertes Template Objekt übergeben. Über einen Custom Controller musst du dir das Template selbst erzeugen.

    Aber was genau möchtest du eigentlich machen?
    » sponsor me via GitHub or PayPal or Revolut

  7. #7
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Daten an das Template übergibst du so:
    PHP-Code:
    $template->foo 'foobar'
    Oder auch so:
    PHP-Code:
    $template->setData([
        
    'foo' => 'foobar',
    ]); 
    Die Daten sind dann im Template über
    PHP-Code:
    $this->foo 
    erreichbar. Ein ganz einfaches Beispiel existiert zB hier: https://docs.contao.org/dev/framewor...ments/#example
    Da es sich dabei aber um ein Inhaltselement handelt, wird dir hier bereits ein instanziertes Template Objekt übergeben. Über einen Custom Controller musst du dir das Template selbst erzeugen.

    Aber was genau möchtest du eigentlich machen?


    Ich habe jetzt contao 4.12 installiert

    und möchte über eine Route

    PHP-Code:
     @Route("/preview/{kitId}"
    ein twig template ausgeben.

    PHP-Code:
            return new Response($this->twig->render(
                
    'fe_page.html.twig' 
    Das funktioniert ... solange bis ich wie hier beschrieben : https://docs.contao.org/dev/framewor...twig-in-contao

    versuche fe_page in einem Twig Template zu extenden.


    Ich bekomme dann die Fehlermeldung :

    PHP-Code:
    An exception has been thrown during the rendering of a template ("Warning: array_filter() expects parameter 1 to be array, null given"in "@Contao_ContaoCoreBundle/fe_page.html5"

    Das Twig Template aus der Doku :

    PHP-Code:
    {# /templates/fe_page.html.twig #}

    {% extends '@Contao/fe_page' %}

    {% 
    block main %}
      <
    h1>Hello from Twig!</h1>
      {{ 
    parent() }}
    {% 
    endblock %} 
    Mein Ziel ist es erstmal das dies funktioniert.
    Und als Step 2 will ich in das template noch css einbinden in den html head .


    PHP-Code:
    {% extends '@Contao/fe_page' %} {% block head %}

    <
    link href="{{ asset('bundles/myname/css/my.css') }}" rel="stylesheet" />
    {% 
    endblock %} {% block body %} 

    aber erstmal meckert er ja schon wenn ich fe_page extende....
    möglicherweise brauche ich das extenden nicht... ich bin jetzt blos den Beispielen gefolgt....


    EDIT :

    Wenn ich das extends weglasse rendert das template...

    jedoch bekomme ich jettz beim einfügen der Styslesheets :
    PHP-Code:
    {% block stylesheets %}
    <
    link rel="stylesheet" type="text/css" href="/css/base.css" />
    {% 
    endblock %} 

    Die Fehlermeldung


    PHP-Code:
    Failed to start the session because headers have already been sent by "/var/www/contao3.loc/vendor/symfony/var-dumper/Dumper/AbstractDumper.php" at line 176. 
    Geändert von Medy (06.12.2021 um 09:39 Uhr)

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Dein Vorhaben ist nicht ganz trivial. Du müsstest nun dem fe_page Template alle Daten übergeben, die es braucht. In Contao passiert dies in der Legacy PageRegular Klasse.

    Was genau macht deine Route?
    » sponsor me via GitHub or PayPal or Revolut

  9. #9
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Dein Vorhaben ist nicht ganz trivial. Du müsstest nun dem fe_page Template alle Daten übergeben, die es braucht. In Contao passiert dies in der Legacy PageRegular Klasse.

    Was genau macht deine Route?


    Ok es scheint jetzt zu funktionieren...

    ich habe jetzt fe_page nicht extendet und kann einen stylesheet einfügen in meine test.html.twig

    PHP-Code:

    // test.html.twig
    {% block stylesheets %}
    <
    link
      href
    ="{{ asset('bundles/starter/css/my.css') }}"
      
    rel="stylesheet"
    />
    {% 
    endblock %} 


    Wobei der Stylesheet nicht im Head eingebunden ist. Sondern im Body als erstes Element ...Was unsauber ist ...

    ich denke deswegen brauch ich fe_page um über den extend via

    PHP-Code:
    {% block head %}
    <
    link
      href
    ="{{ asset('bundles/starter/css/my.css') }}"
      
    rel="stylesheet"
    />
    {% 
    endblock %} 
    etwas in den head zu schreiben ....

    Da ist aber weiterhin die fehlermeldunng wenn ich fe_page extende

    PHP-Code:
    {% extends '@Contao/fe_page' %} 
    PHP-Code:
    An exception has been thrown during the rendering of a template ("Warning: array_filter() expects parameter 1 to be array, null given"in "@Contao_ContaoCoreBundle/fe_page.html5"
    Geändert von Medy (06.12.2021 um 10:58 Uhr)

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Wie gesagt, du müsstest immer noch das Template mit allen benötigten Daten befüllen.

    Aber warum genau machst du überhaupt so eine Route? Vorgesehen ist das nicht wirklich - oder es ist nicht wirklich einfach. In Contao 4.12 kannst du außerdem Page Controller nutzen, aber selbst da ist es noch immer nicht so einfach, eine reguläre Contao Seite anzeigen zu lassen.
    » sponsor me via GitHub or PayPal or Revolut

  11. #11
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Wie gesagt, du müsstest immer noch das Template mit allen benötigten Daten befüllen.

    Aber warum genau machst du überhaupt so eine Route? Vorgesehen ist das nicht wirklich - oder es ist nicht wirklich einfach. In Contao 4.12 kannst du außerdem Page Controller nutzen, aber selbst da ist es noch immer nicht so einfach, eine reguläre Contao Seite anzeigen zu lassen.

    So wie ich das verstanden habe sollte ich meine Seite also eher über ein Content Element erstellen ?

    Controller > ContentElement + Content Element über DCA stylen ?

    Ich dachte mir wozu brauche ich ein Content Element ? Ich will doch einfach nur ein twig template ausgeben. und style dann das twig template ..

    Warum funktioniert der fe_page extend denn nicht ?

    Über den Page controller kann ich doch keine dynamischen anlegen ? @Route("/preview/{kitId}",
    Geändert von Medy (06.12.2021 um 11:24 Uhr)

  12. #12
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Zitat Zitat von Medy Beitrag anzeigen
    Warum funktioniert der fe_page extend denn nicht ?
    Hab ich doch schon mehrmals erwähnt, du befüllst das Twig Template vermutlich nicht mit allen nötigen Daten


    Um dir antworten auf deine Fragen geben zu können beschreibe doch zuerst mal deinen Use-Case genauer.
    » sponsor me via GitHub or PayPal or Revolut

  13. #13
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Hab ich doch schon mehrmals erwähnt, du befüllst das Twig Template vermutlich nicht mit allen nötigen Daten


    Um dir antworten auf deine Fragen geben zu können beschreibe doch zuerst mal deinen Use-Case genauer.


    Ok Mein Use Case ist :

    1. User tippt ein in die URL: preview/Test1
    2. Dann soll ein Twig template gerendert werden welches durch einen array aus der datenbank befüllt wird

    PHP-Code:
            return new Response($this->twig->render(
                
    '@Starter/MyCustom/fe_page.html.twig',
                [
                    
    'html_definition' => $html_definition,
                ]
            )); 

    dort wird dann eine liste / Webseite angezeigt
    list item 1
    list item 2


    diese Seite will ich stylen mit css

    also wollte ich in den Head der Seite mein CSS stylesheet einfügen.

    {% block head %}
    <link
    href="{{ asset('bundles/starter/css/my.css') }}"
    rel="stylesheet"
    />
    {% endblock %}


    durch das extenden von fe_page sollte ich in den head schreiben können richtig?

    Da ich fe_page zurzeit nicht extende landet mein stylesheet einfach im body ( was auch funktioniert) anstelle von head wo es hinsoll
    Geändert von Medy (06.12.2021 um 11:36 Uhr)

  14. #14
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Also du willst, dass diese Liste dann irgendwo innerhalb der regulären Contao Website angezeigt wird? Das wäre eher ein Inhaltselement oder Frontend-Modul.
    » sponsor me via GitHub or PayPal or Revolut

  15. #15
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Also du willst, dass diese Liste dann irgendwo innerhalb der regulären Contao Website angezeigt wird? Das wäre eher ein Inhaltselement oder Frontend-Modul.
    Ja aber das ist doch umständlich.... ich will nicht extra ein content element anlegen + palette definition usw ... aber ich denke es ist so gewollt ?
    Ausserdem nicht innerhalb einer regulären Seite sondern... Die Ausgabe ist die Seite

    meine route preview/Test1
    Soll eine komplette Seite sein basierend auf einem Twig template

  16. #16
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Es aber auch umständlich eine komplette Seite selbst zu rendern.
    » sponsor me via GitHub or PayPal or Revolut

  17. #17
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Es aber auch umständlich eine komplette Seite selbst zu rendern.
    Ich stecke noch nicht so tief drinn in Contao ... möglichweise fehlt mir da die Contao Sichtweise.
    Ich bin jetzt einfach aus Symfony sicht rangegangen.
    Controller > Twig Template ausgeben > stylen > fertig.
    Geändert von Medy (06.12.2021 um 11:47 Uhr)

  18. #18
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Zitat Zitat von Medy Beitrag anzeigen
    Ausserdem nicht innerhalb einer regulären Seite sondern... Die Ausgabe ist die Seite
    Die fe_page ist dafür gedacht, eine reguläre Contao Seite zu rendern.
    » sponsor me via GitHub or PayPal or Revolut

  19. #19
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Die fe_page ist dafür gedacht, eine reguläre Contao Seite zu rendern.
    Fazit man sollte also ein Content Element nutzen um eine komplette Seite(Custom) zu rendern in meinem Fall ?
    Oder wie extende ich fe_page nun richtig ? es hakt ja nur noch daran den stylesheet in den head der seite zu bekommen...


    Es ist Halt eine Seite die nicht dafür gedacht ist das man Sie anpasst. Es ist quasi die Ausgabe für Daten die in einem Backend Modul gesammelt wurden.
    Geändert von Medy (06.12.2021 um 12:14 Uhr)

  20. #20
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Zitat Zitat von Medy Beitrag anzeigen
    Fazit man sollte also ein Content Element nutzen um eine komplette Seite(Custom) zu rendern in meinem Fall ?
    Nein, ein Inhaltselement fügst du dann in einer regulären Contao Seite ein. Die Seite rendert dann Contao.


    Zitat Zitat von Medy Beitrag anzeigen
    Oder wie extende ich fe_page nun richtig ?
    Das Problem ist nicht das extenden. Das extenden würdest du dann verwenden, wenn du deine fe_page für das rendern normaler Contao Seiten anpassen möchtest.
    » sponsor me via GitHub or PayPal or Revolut

  21. #21
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Nein, ein Inhaltselement fügst du dann in einer regulären Contao Seite ein. Die Seite rendert dann Contao.


    Das Problem ist nicht das extenden. Das extenden würdest du dann verwenden, wenn du deine fe_page für das rendern normaler Contao Seiten anpassen möchtest.

    Konnte man nicht im Controller den Head der Seite / Route verändern sodass dort mein stylesheet mit drinne steht ? Das würde mein Problem auch lösen

  22. #22
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Stylesheets etc. kannst du so zur Seite programmatisch hinzfügen: https://docs.contao.org/dev/framework/asset-management/

    Es gibt auch elegantere Lösungen mit Symfony Encore / Webpack (wenn man seine Contao Installation dahingehend angepasst hat) die auch einige Entwickler so nutzen. By default geht es aber nur so wie in der Dokumentation beschrieben und ich persönlich habe mit Encore und Webpack keine Erfahrungen.
    Geändert von Spooky (06.12.2021 um 13:37 Uhr)
    » sponsor me via GitHub or PayPal or Revolut

  23. #23
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Stylesheets etc. kannst du so zur Seite programmatisch hinzfügen: https://docs.contao.org/dev/framework/asset-management/

    Es gibt auch elegantere Lösungen mit Symfony Encore / Webpack (wenn man seine Contao Installation dahingehend angepasst hat) die auch einige Entwickler so nutzen. By default geht es aber nur so wie in der Dokumentation beschrieben und ich peresönlich habe mit Encore und Webpack keine Erfahrungen.
    Dafür brauch ich wieder ein content element oder ? Für mein Backend Modul hatte ich assets so hinzugefügt ..
    Aber ich wüsste jetzt nicht wie das für eine Route gehen sollte ?
    Geändert von Medy (06.12.2021 um 13:41 Uhr)

  24. #24
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.876
    Partner-ID
    10107

    Standard

    Zitat Zitat von Medy Beitrag anzeigen
    Aber ich wüsste jetzt nicht wie das für eine Route gehen sollte ?
    Eine normale Symfony Route hat grundsätzlich nichts mit Contao zu tun. Du kannst dort natürlich Dinge aus dem Contao Framework verwenden, aber musst dir halt alles selbst bauen. Eine Alternative wären Page Controller, wie schon erwähnt.
    » sponsor me via GitHub or PayPal or Revolut

  25. #25
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Eine normale Symfony Route hat grundsätzlich nichts mit Contao zu tun. Du kannst dort natürlich Dinge aus dem Contao Framework verwenden, aber musst dir halt alles selbst bauen. Eine Alternative wären Page Controller, wie schon erwähnt.

    Damit hat sich das Problem gelöst.

    Ich habe das Twig Template von einem Base Template extended


    PHP-Code:
    {% extends '@Contao_StarterBundle/base.html.twig' %} 

    HTML-Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
      </head>
      <body>
        {% block body %}{% endblock %} {% block javascripts %}{% endblock %}
      </body>

    und kann somit nun den stylesheet in den Block % stylesheets einfügen.


    Thanks

  26. #26
    Contao-Nutzer
    Registriert seit
    22.10.2021.
    Beiträge
    45

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Eine normale Symfony Route hat grundsätzlich nichts mit Contao zu tun. Du kannst dort natürlich Dinge aus dem Contao Framework verwenden, aber musst dir halt alles selbst bauen. Eine Alternative wären Page Controller, wie schon erwähnt.

    Wobei komischerweise funktioniert das nur im debug modus -.- das der stylesheet im head landet
    ohne landet er im body .... ohhh my...

    Naja es erfüllt erstmal seinen zweck ... das styling funktioniert ja ...


    Edit .-.-.. gelöst die dumps waren schuld
    Geändert von Medy (06.12.2021 um 15:29 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •