Twig und Seitenlayoutszuordung

[Mich]

Moin

Ich habe dazu schon einiges gelesen, aber nur wenig verstanden.

Mir ist nicht klar, wie man Templates einem Seitenlayouts zuordnet. Ich nutze Twig-Seitenlayouts mit Slots. Unter „Include-Einstellungen“ kann man zwar ein Seiten-Templates auswählen, aber dort gibt es bei mir nur „page/layout [ContaoCore]“ zur Auswahl. Bin mir auch nicht sicher ob das was damit zu tun hat.

Mein Ziel ist es, eigene Seitenlayouts für 1 Spalte, 2 Spalten, Volle Breite, etc. zu erstellen. Im Moment komme ich aber nicht weiter und finde den entscheidenden Schritt nicht.

[Spooky]

Du machst dir einfach neue Template Varianten für das was du brauchst. page/layout/1column, page/layout/2columns etc.

[planepix]

In der Contao TV Folge vom letzten Donnerstag wird dazu auch etwas gezeigt.

Vielleicht gibt das noch eine Idee…

https://www.youtube.com/live/tbdCMYR...rOR8khMq7pXrz6

[Mich]

Das Anlegen von Templates habe ich nun möglicherweise verstanden.

Unklar ist mir jedoch, ob ich für 1-Spalte, 2-Spalten usw. jeweils ein eigenes Theme anlegen muss.

In den Seitenlayouts werden mir die Templates „1column“ oder „2columns“ jedenfalls nicht zur Auswahl angezeigt.

[Spooky]

Nein, separate Themes musst du dafür nicht anlegen.

Die Vorgehensweise ist grundsätzlich nicht anders als mit den alten fe_page Templates.

Wo/wie hast du deine Templates nun angelegt?

[BugBuster]

Funktioniert bei mir, Beispiel siehe hier

[Mich]

Vielen Dank euch allen für die bisherigen Tipps und Links.

@Spooky, ich habe die Templates unter Contao > Layout > Templates > page > layoutname angelegt und dort dann 1column, 2columns usw. erstellt. Im Seitenlayout des Theme ließen sie sich allerdings trotzdem nicht auswählen oder einbinden. Mache ich da etwas grundsätzlich falsch?

Ich habe es auch nicht geschafft, mein Theme-CSS einzubinden. Ich habe Verschiedenes ausprobiert, zuletzt zum Beispiel

<link href="{{ asset('lago/css/global.css', 'contao_vfs.files') }}" type="text/css" rel="stylesheet">

. Im ausgegebenen Quelltext sah der Link zwar immer korrekt eingebunden aus. Wenn ich ihn jedoch direkt geöffnet habe, wurde nicht der Inhalt der CSS-Datei angezeigt.

Irgendwann kam ich nicht mehr in den Contao Manager, um den Anwendungs-Cache zu leeren. Deshalb habe ich die komplette Installation gelöscht.

Nach weit über 100 Stunden Herumprobieren bin ich ehrlich gesagt ziemlich unzuversichtlich.

Jetzt stehe ich wieder ganz am Anfang – mit einer frisch installierten Contao-Version.

[Spooky]

@Spooky, ich habe die Templates unter Contao > Layout > Templates > page > layoutname angelegt

Unter Layout » Templates kannst du nur die alten HTML5 Templates verwalten und bearbeiten - wie hast du es dort geschafft Twig Templates anzulegen?

Die Varianten für das page/layout Template solltest du dir wenn dann unter Layout » Template Studio anlegen können.

Deshalb habe ich die komplette Installation gelöscht.

Das war nicht notwendig, du hättest dich auch einfach mit dem Problem beschäftigen können.

[fiedsch]

Du machst dir einfach neue Template Varianten für das was du brauchst. page/layout/1column, page/layout/2columns etc.

[…] habe die Templates unter Contao > Layout > Templates > page > layoutname angelegt

Für mich liest sich das so, als ob bei Dir der Ordner layout als „Zwsichenebene“ fehlt.

[Mich]

Unter Layout » Templates kannst du nur die alten HTML5 Templates verwalten und bearbeiten - wie hast du es dort geschafft Twig Templates anzulegen?

Die Varianten für das page/layout Template solltest du dir wenn dann unter Layout » Template Studio anlegen können.

Templates konnte ich dort zwar nicht anlegen, aber Ordner, die man dann im Template-Studio auswählen kann.



Also, von vorn:
Wenn man diese (Ordner) nicht in Templates anlegt, sondern im Template Studio, frage ich mich, wie das funktioniert.

Im Template Studio habe ich die Auswahl „Standard/Keiner“ und „LagoTheme [lagotpl]“. LagoTheme ist das von mir erstellte Theme und „lagotpl“ ist der Themeordner in /temlates

Wie geht man nun vor, wenn man für das Seitenlayout „1column“ im „LagoTheme“ eine Template-Änderung vornimmt?


Ich gehe ins Template Studio, wähle „LagoTheme [lagotpl]“, dann page > page/layout, dann auf "Ihre Template erstellen" und jetzt wie geht es weiter? Wie sorgt man nun dafür, dass die Änderung die man vornimmt, dem Seitenlayout „1column“ zugeordnet wird?

[Spooky]

Es funktioniert genau so wie bei Inhaltselementen bspw.. Wenn du eine Template-Variante namens "foobar" für das Inhaltselement "Text" anlegen willst, dann erzeugst du das Template templates/content_element/text/foobar.html.twig

Wenn du eine Template-Variante namens "1column" für ein Seitenlayout anlegen willst, dann erzeugst du das Template templates/page/layout/1column.html.twig etc.

Brauchst du denn unbedingt deine Theme Unterordner? Ich würde es ohne machen - außer du planst mehrere Themes in der selben Installation zu haben. Ansonsten machst du es dir unnötig schwer.

[Mich]

Brauchst du denn unbedingt deine Theme Unterordner? Ich würde es ohne machen - außer du planst mehrere Themes in der selben Installation zu haben. Ansonsten machst du es dir unnötig schwer.

Ich brauche keine Unterordner, wenn sie nicht notwendig sind.

Was ich umsetzen möchte, ist ein Theme mit unterschiedlichen Seitemlayouts, die ich dann den einzelnen Seiten zuordnen kann. Seitenlayouts für die ganze Breite (1column), Sidebar rechts (2columns), Sidebar links

[Spooky]

Na dann - siehe die vorherigen Posts.

[mlweb]

Hast Du Dir mal die oben verlinkte Contao-Show angesehen? Da zeigt es Christian live.

[Mich]

Das war jetzt eine – wie nennt man das, wenn man ein Kind mit der Zange holt?

Jetzt bin ich einen kleinen Schritt weiter. Aber es bleiben viele Fragen.

Wie bindet man den Image-Viewer ein? Ist das Colorbox oder Mediabox oder noch etwas anderes? Ich habe das CSS und das JS von beiden eingebunden, aber es tut sich nichts.

[Spooky]

So z.B.:

{% extends '@Contao/page/layout.html.twig' %}

{% block body %}
    {{ parent() }}
    {{ include('@Contao/j_colorbox') }}
{% endblock %} 

[Birden]

Hab es auch versucht. Genial, damit wird das CSS und JS gleich mitgeladen. Leider sieht es so aus, als sei die Colorbox nicht geladen, denn wenn man auf ein Bild klickt, wird es direkt über den Bildlink geöffnet.

[Mich]

So z.B.:

{% extends '@Contao/page/layout.html.twig' %}

{% block body %}
    {{ parent() }}
    {{ include('@Contao/j_colorbox.html.twig') }}
{% endblock %} 

Das Einbinden war unkompliziert, aber danach passiert nichts. Gibt es noch etwas anderes, das ich berücksichtigen muss?

[WebRoxx]

Das Einbinden war unkompliziert, aber danach passiert nichts. Gibt es noch etwas anderes, das ich berücksichtigen muss?

bei mir geht das nur mit jquery 3.7.1 mit der 4.x geht es nicht...

[Mich]

Das wars

[WebRoxx]

gibt es denn jetzt so ein neues "utimatives" script was man so verwendet?

ich nutz aktuell baguetteBox... zumindest im ersten 5.7. projekt.

[BugBuster]

bei mir geht das nur mit jquery 3.7.1 mit der 4.x geht es nicht...

Bringt doch Contao mit? Wenn man das dazu packt:

<script src="{{ asset('js/jquery.js', 'contao-components/jquery') }}"></script>

[WebRoxx]

Bringt doch Contao mit? Wenn man das dazu packt:

<script src="{{ asset('js/jquery.js', 'contao-components/jquery') }}"></script>

ja oder so

[Mich]

Ich habe eine sehr alte Seite nun mit 5.7 neu aufgesetzt und mich dabei nur auf Twig und Bordmittel gestützt. Für diese kleine Seite lohnt sich Contao oder ein CMS im Allgemeinen eigentlich kaum.

Rückblickend habe ich wohl mehr Zeit damit verbracht, mich in Twig einzuarbeiten und meine Schwierigkeiten damit zu lösen, als ich für eine handgeschriebene Variante gebraucht hätte. In einem Bruchteil der Zeit hätte ich sie vermutlich direkt selbst geschrieben. Dies obwohl ich ewiger Anfänger bin und immer wieder einst gelerntes neu nachschlagen muss. Ich mache sowas halt nur alle Schaltjahre. Allerdings lernt nicht jede Person gleich schwer oder leicht – und würde ich das heute noch einmal beginnen, müsste ich vieles nicht mehr lange suchen und könnte sofort anfangen.

Überrascht hat mich, wie klein die CSS-Datei im Vergleich zu meiner alten Seite geworden ist. Auch die Ladezeit ist sehr gut – selbst in Laragon öffnet sich die Seite sehr schnell.

Für mich hat es sich am Ende gelohnt, das Projekt durchzuziehen. So habe ich ein grundlegendes Verständnis dafür bekommen, wie das mit dem Template-Studio und Twig funktioniert. Und obwohl ich vermutlich nur einen Bruchteil von dem verstanden habe, was damit möglich ist, finde ich es genial.

[Spooky]

gibt es denn jetzt so ein neues "utimatives" script was man so verwendet?

ich nutz aktuell baguetteBox... zumindest im ersten 5.7. projekt.

Ich nutze meist GLightbox.

[Birden]

Vielleicht hätte ich dafür ein eigenes Thema anfangen sollen, aber andererseits paßt es auch zu diesem Thema.

Der Post von @Spooky war für mich ein kleines AHA-Erlebnis:

So z.B.:

{% extends '@Contao/page/layout.html.twig' %}

{% block body %}
    {{ parent() }}
    {{ include('@Contao/j_colorbox.html.twig') }}
{% endblock %} 

Bei mehrsprachigen Seiten gibt es ein Problem mit dem CSS-Pfad. Im Quelltext im Browser wird es zwar richtig ausgegeben

<link rel="stylesheet" href="assets/colorbox/css/colorbox.min.css">

aber aufgerufen wird es mit dann mit dem URL-Präfix /de/ oder /en/ . Hier die Meldung aus dder Browserkonsole:

Die Ressource von "https://zug.local/de/assets/colorbox/css/colorbox.min.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff). de

Wie läßt sich das lösen?

[WebRoxx]

Vielleicht hätte ich dafür ein eigenes Thema anfangen sollen, aber andererseits paßt es auch zu diesem Thema.

Der Post von @Spooky war für mich ein kleines AHA-Erlebnis:



Bei mehrsprachigen Seiten gibt es ein Problem mit dem CSS-Pfad. Im Quelltext im Browser wird es zwar richtig ausgegeben

<link rel="stylesheet" href="assets/colorbox/css/colorbox.min.css">

aber aufgerufen wird es mit dann mit dem URL-Präfix /de/ oder /en/ . Hier die Meldung aus dder Browserkonsole:

Die Ressource von "https://zug.local/de/assets/colorbox/css/colorbox.min.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff). de

Wie läßt sich das lösen?

im twig layout fehlt die base-url

eventuell löst es das problem, kann es aber nicht testen hab noch keine 5.7 mit mehrsprachigkeit (ist ins blaue geraten)

[Spooky]

Könnte man als Issue auf GitHub posten.

[BugBuster]

im twig layout fehlt die base-url

eventuell löst es das problem, kann es aber nicht testen hab noch keine 5.7 mit mehrsprachigkeit (ist ins blaue geraten)

Ist bei mir enthalten. Habe aber keine Mehrsprachige Installation zum testen, nur die Contao Demo umgebaut auf Layout mit Slots

[Birden]

Ich habe bei der zweisprachigen Seite als Übergangslösung den vollen Pfad eingebunden, was auch nicht klappt. Hat jemand eine Idee?

[Spooky]

Ich habe bei der zweisprachigen Seite als Übergangslösung den vollen Pfad eingebunden, was auch nicht klappt. Hat jemand eine Idee?

» https://community.contao.org/de/show...l=1#post602693