Responsive Typo3–Backend und Grid

Responsive TYPO3 (3): Backend-Layouts und Grid Elements

Nachdem wir Euch bisher die Mittwald Vorlage und Responsive Webdesign näher gebracht haben, werde ich im heutigen Artikel erklären, wie wir Backend-Layouts genutzt haben und wie Ihr schnell Inhaltselemente mit der Extension Grid Elements erstellt.

Backend-Layouts

In unserem Responsive TYPO3 Template nutzen wir drei Backend-Layouts, die es dem Redakteur erleichtern sollen, sich im TYPO3-Backend zurechtzufinden. Dazu nutzen wir ein dreispaltiges Layout speziell für die Footer-Seite, ein zweispaltiges Layout mit Platz für einen Slider und ein einspaltiges Layout, welches ebenfalls Platz für einen Slider bietet. Sobald ein Redakteur eine neue Seite anlegt, wird eines der Layouts auf diese Seite vererbt. Wenn das Layout geändert werden soll, findet Ihr den Punkt dafür unter Seite (diese bearbeiten) > Erscheinungsbild, Backend-Layout.

Erstellung eines neuen Backend-Layouts

Auch eigene Backend-Layouts zu erstellen ist sehr leicht. In unserem Ordner „Daten“ erstellt Ihr einen neuen Datensatz, dabei muss es sich um ein Backend-Layout handeln. Nachdem Ihr einen Namen und evtl. ein Icon für das Layout vergeben habt, könnt Ihr auf das kleine Symbol „Assistent“ im Abschnitt Konfiguration klicken. Mithilfe dieses „Grid Wizards“ könnt Ihr Euch ein passendes Layout zusammenstellen, vergesst nicht die Zellen zu benennen und Zellennummern zu vergeben. Danach lässt sich das Layout bereits wie zuvor beschrieben einbinden. An der Frontend-Ansicht ändert sich so jedoch noch nichts.

Erstellung eines Rasterelements mithilfe des Grid Wizards

Backendlayouts für das Frontend vorbereiten

Im Reiter „Erscheinungsbild“ lässt sich aber nicht nur die Erscheinung des Backend-Layouts steuern, sondern auch über das Feld „Frontend-Layout“ die Ausgabe des Frontends. Standardmäßig gibt es dort die Einträge „Standard“, „Layout 1“, „Layout 2“ und „Layout 3“, die für einen Redakteur nicht sehr aussagekräftig sind. Deshalb haben wir sie in unserer Vorlage umbenannt in „Standard (2 Spalten)“, welches wir z. B. auf der Seite Über Uns einsetzen, und „1 Spalte“, welches man direkt auf der Startseite sieht.

typo3 schulungen

Dazu haben wir folgendes TypoScript unter Seite (diese bearbeiten) > Ressourcen > TypoScript-Konfiguration eingefügt:

TCEFORM.pages.layout{
altLabels.0 = Standard (2 Spalten)
altLabels.1 = 1 Spalte
}

Überflüssige Layout-Elemente könnt Ihr mit dem Code removeItems = (Zahl des Layouts, hier z.B. 3) entfernen.

Aber das ändert bisher lediglich die Namen im Backend. Damit die Änderung des Frontend-Layouts auch greift, haben wir über TypoScript dafür gesorgt, dass der body des HTML-Dokuments mit einer passenden ID versehen wird, die wir über CSS ansprechen. Das TypoScript wird direkt nach page = PAGE eingefügt und lautet:

page {

typeNum = 0
bodyTagCObject = CASE
bodyTagCObject {
key.field = layout
default = TEXT
default.value = <body>

0 < .default

1 = TEXT
1.wrap = <body id="|">
1.value = full
}

Wenn nicht anders definiert, nutzen wir hier also ein einfaches body-tag, um den Inhalt zu umschließen. Wenn wir jedoch jetzt im Feld „Frontend-Layout“ das Feld mit dem Wert 1, in unserem Fall „1 Spalte“, auswählen, wenden wir statt einem normalen body einen body mit ID an. Diese ID beträgt in unserem Fall „full„. Im CSS definieren wir jetzt nur noch den Fall „full“, bei dem wir den div-Container auf der rechten Seite entfernen und dem linken div-Container mehr Breite einräumen. Jetzt muss der Redakteur nur noch das richtige Layout auswählen. :-)

Zusätzliche Elemente mit Grid Elements

Die Extension Grid Elements gleicht den seit TYPO3 4.5 mitgelieferten Backend-Layouts sehr. Im Ordner „Daten“ erstellt Ihr zunächst einen neuen Datensatz, diesmal ein „CE Backend Layout“. Diesem gebt Ihr wie gewohnt einen Namen und unter dem Reiter „Konfiguration“ klickt Ihr Euch mithilfe des Grid Wizards ein Element zusammen. Vergesst auch hier nicht Namen und Zellennummern zu vergeben, sonst funktioniert Euer Element nicht!

Über TypoScript und CSS können wir jetzt das Erscheinungsbild des Content Elements definieren.

tt_content.gridelements_pi1.20.10.setup {
1 < temp.gridelements.defaultGridSetup
1 {
wrap = <div>|</div>
columns {
1 < .default
1.wrap = <div>|</div>
2 < .default
2.wrap = <div>|</div>
3 < .default
3.wrap = <div>|</div>
}
}

Da es sich hier um Wraps handelt, könnt Ihr Euren divs jetzt IDs oder Klassen mitgeben. Diese werden dann wie gewohnt über CSS definiert – und das ist dann schon alles.

Einfügen eines Rasterelements

Ihr könnt die Elemente jetzt ebenso einfach einfügen, wie ein Text-Element, dazu müsst Ihr nur auf der Seite Eurer Wahl neuen Inhalt hinzufügen, den Reiter „Raster-Elemente“ auswählen und dort das entsprechende Layout markieren. Ihr speichert den Fortschritt, kehrt auf die Seite zurück und seht ein neues Inhaltselement vor Euch. Auch hier könnt Ihr über die Schaltfläche „Einen neuen Datensatz erstellen“ wieder Inhalt hinzufügen. Dabei kann es sich um Text, Bilder oder auch ein neues Raster-Element handeln; Ihr habt die freie Wahl. Da alles über CSS definiert wurde, kann ein Redakteur beinahe nichts mehr falsch machen.

Nächster Artikel unserer Serie

Ich hoffe, ich konnte Euch einen guten Überblick über den Aufbau unserer Vorlage im Bezug auf Backend-Layouts und die Extension gridelements geben. Im nächsten Artikel werden wir Euch dann den FlexSlider vorstellen. Ihr dürft gespannt sein! :-)

Kommentare

  1. Eduard am

    Hallo,

    Wo kann ich die Backendlayouts finden die von Haus aus schon angelegt sind?
    In dem Ordner in dem man laut Screenshot selbst welche anlegen soll/darf finde ich keine Backend-Layout Datensätze… und auch sonst nirgendwo etwas das darauf hindeutet wo diese liegen könnten.
    Ich möchte nämlich keine neuen anlegen sonder bloß die vorhandenen ein wenig ändern.

    Antworten
  2. Alfred Bez am

    Guter Artikel,
    allerdings wolltet ihr wahrscheinlich auf den Artikel „Responsive Webdesign“ und nicht auf „Responsive Design“ verweisen.

    Antworten
    1. Annika Schwanitz am

      Hallo Alfred,

      ja da hast du Recht. Wir haben den Link angepasst. :)

      Viele Grüße
      Annika vom Mittwald Social Media Team

      Antworten
  3. Tom am

    Hallo zusammen,

    ich habe eine Frage zu grid_elements (1.4), hoffentlich kann sie mir hier jemand beantworten.

    Ich habe eine Element angelegt dass aus insgesamt 7 Spalten, aufgeteilt in 2 Zeilen besteht, in etwa so:

    [x] [x] [x] [x]
    [x] [lllllllll] [X]

    Das Ganze klappt soweit auch ganz gut. Ich habe nun allerdings die Not, dass ich in das letzte Grid-Element einen MARKER einbauen muss, weil dort ein Menü hinein soll.

    Die Spalte (bei mir colID 11) wird ja so gewrappt:

    11 < .default
    11.wrap = |
    }

    Ich habe nun versucht, das direkt so zu wrappen:

    11 < .default
    11.wrap = ###MARKER###
    }

    Das funktioniert leider nicht. Ebenso wenig funktioniert es, wenn ich den Marker in ein Seiteninhaltselement vom Typ HTML schreibe.

    Kann mir jemand helfen und verraten, wie man das hinbekommt, dass der Marker von dynamischen Inhalt – in meinem Fall ein Menü – ersetzt wird?

    Danke schon mal :-)

    Antworten
  4. Mirko Kaufmann am

    Hallo Sonja,

    könntest du deinen Wunsch noch einmal anders formulieren? Wenn ich richtig liege und du in deinen Raster- oder Inhaltselementen ein weiteres Feld für z. B. einen Link benötigst, kannst du dies mittels FlexForms lösen.

    Viele Grüße

    Mirko

    Antworten
  5. Sonja Würden am

    Hallo,
    ich setze gridelements bei jeder Gelegenheit ein und habe nun folgende Frage:
    Ist es möglich daß ich dem Rasterelement einen Link mitgebe? Als Beispiel Textbox mit Überschrift, Text und Bild. Statt 3mal will ich nur ein weiterführender Link mitgeben der dann für ein Raster-Element gültig ist.

    Mein Script:
    ##### 2 Stalten ##########
    1 < lib.gridelements.defaultGridSetup
    1 {
    wrap = |
    columns {
    1 < .default
    1.wrap = |
    2 < .default
    2.wrap = |
    }
    }

    Gruß und Danke.
    Sonja

    Antworten
  6. Olaf am

    Die Column CONTENT_NORMAL erscheint im Auswahlmenü, wenn man im Config des Backend-Layout „2 Spalten inkl. Slider“ die Zeile „allowed = |“ entfernt.

    Beste Grüße
    Olaf

    Antworten
  7. Olaf am

    Hallo Philipp,.

    äh, das hatte ich auch schon geändert.

    Warum stehen in gridelements.t3s eigentlich vier Elemente?
    Angelegt habe ich doch nur 3 CE Backend Layouts (White-Box, 2 Spalten, 3 Spalten).

    Viele Grüße

    Olaf

    Antworten
  8. Philipp Stranghöner am

    Hallo Olaf,

    danke für das Lob zu unserer Vorlage! :)
    Ersetze in der gridelements.t3s bitte einmal an allen Stellen temp.gridelements durch lib.gridelements, vielleicht löst es das Problem schon?

    Viele Grüße
    Philipp

    Antworten
  9. Olaf am

    Hallo,

    vielen dank für das tolle Template!

    Ich habe es mit Eurer Anleitung und kleinen Anpassungen fast geschafft, es unter 4.5.30 zum Laufen zu bringen..

    – CE Backend Layouts angelegt
    – flexslider und gridelements (beide v1.4.1) installiert
    – IDs in gridelements.t3s angepasst
    – Pfad zu shadow.png in root.t3s angepasst
    – zusätzlich kk_calendar und perfectlightbox installiert (cl_jquery funktioniert irgendwie nicht…)

    Nun mein Problem:
    Wenn ich eine neue Seite anlege mit Backend-Layout „2 Spalten inkl. Slider 66%| 33%“ werden mir bei einem neuen Content-Element auf dieser Seite die Columns SLIDER, CONTENT_RECHTS und „Grid Container“ (?) angeboten. Warum fehlt hier COLUMN_NORMAL? Woher kommt der Eintrag“Grid Container“? Die Selektion von „Grid Container“ ist darüber hinaus nicht möglich.
    Die Auswahl-Menüs „Grid Container“ und „Grid Container Columns“ auf dem Register „Extended“ des Content Elements sind leer. Das muß wohl so sein, wenn das Element nicht innerhalb eines Grid Elements angeordnet ist, oder?

    Viele Grüße und Vielen Dank für die Unterstützung

    Olaf

    Antworten
  10. mabi am

    falls in der TYPO3 Installation sinnvollerweise explicitAllow verwendet wird, müssen die Rechte für die Benutzung der angelegten Rasterelemente (CE Backend Layout = UNGLEICH TYPO3 BACKEND LAYOUT) explizit gesetzt werden:

    DAMIT RASTERELMENTE FÜR REDAKTEURE ERLAUBT SIND MÜSSEN DIESE EINERSEITS ALS INHALTSELEMENTE ERLAUBT SEIN (Feldwerte explizit erlauben/verbieten: Raster-Element erlauben – sonst kommt es zur schon angeführten Fehlermeldung) UND ANDERERSEITS FOLGENDE ERLAUBTE AUSSCHLUßFELDER AKTIVIERT WERDEN! Seiteninhalt – Inhaltselemente (tx_gridelements_children) – Raster-Layout (tx_gridelements_backend_layout) AUSSERDEM MUSS NOCH UNBEDINGT Seiteninhalt – Spalten (colPos) AKTIV SEIN, DA SONST INHALTSELEMENTE NICHT INNERHALB DES RASTERELEMENTS ANGELEGT WERDEN!
    alle anderen können ignoriert werden

    Antworten
  11. Frank am

    Guten Tag,
    ich bin ziemlicher Neuling in Sachen Typo3, allerdings wurde ich damit beauftragt unsere Vereins Homepage auf Vordermann zu bringen.
    Ich habe die Extension gridelements installiert und schaffe es auch soweit, dass die verschiedenen Spalten angezeigt werden, allerdings nicht nebeneinander sondern untereinander.
    Alle Versuche waren bisher erfolglos.
    Könnte jemand helfen?
    Würde einen Account fürs den Backendzugang zu Verfügung stellen.
    MfG

    Antworten
  12. Steffi am

    Dankeschön an David für den nützlichen Hinweis ;)

    Hab grad ebenfalls Version 2.0.2 der Ext. installiert – mit lib.gridelements.defaultGridSetup funktioniert das Setup wieder wie gewohnt :)

    Antworten
  13. David Bruchmann am

    Da das Objekt „temp.gridelements.defaultGridSetup“ nicht definiert war, habe ich mir mal das TS der grid-Erweiterung angesehen und festgestellt, daß das Setup in der aktuellen Version wahrscheinlich anders ist als in der Version die bei Erscheinung des Artikels verwendet wurde.

    Bei mir läuft das FE-Rendern mit der aktuellen Version mit folgendem Setup:

    tt_content.gridelements_pi1.20.10.setup {
    1 < lib.gridelements.defaultGridSetup
    1 {
    wrap = <div class=“grid grid-2-cols“>|</div>
    columns {
    1 < .default
    1.wrap = <div class=“grid-item grid-item-left“>|</div>
    2 < .default
    2.wrap = <div class=“grid-item grid-item-right“>|</div>
    }
    }
    }

    Einzige funktionelle Änderung: statt „temp.gridelements.defaultGridSetup“ heißt es jetzt „lib.gridelements.defaultGridSetup“

    Antworten
  14. cordi am

    Hallo zusammen,

    Habe die t3d Datei nach der Anleitung in eine Neuinstallation eingebaut. Deswegen, wenn ich das richtig verstanden habe, muss ich mit den ID’s nichts tun, oder??

    Die Seitenstruktur hat es mir jetzt auch angelegt, jedoch ohne Inhalte auf jeder Seite. Ist das richtig so??

    Es zeigt mir nun nur die Hintergrundgrafik, das Logo und die obere -und die Breadcrumb-Navigation an.

    Keine Inhalte und auch kein Slider???

    Ist das richtig so??

    Was muss ich noch tun??

    Danke für das tolle Projekt und danke für eure Antworten….

    Antworten
    1. Kristina Dahl am

      Hallo cordi,

      da die Inhalte bei unserem Template größtenteils in Grid-Elementen (Extension grid_elements) untergebracht sind, können diese in der .t3d-Datei nicht exportiert werden. Es ist also richtig, dass bei dir keine Inhalte vorhanden sind. Das gleiche gilt für den FlexSlider, da es sich auch hier um eine Extension handelt.

      Wie du die Inhalte mit den Extensions einfügst, erfährst du in den Blog-Beiträgen zum Responsive Template und auch in der anleitung.txt.

      Bei weiteren Fragen melde dich gerne! :)

      Viele Grüße

      Kristina

      Antworten
  15. Carsten Walther am

    Habs raus … das war ja einfach… ;)

    Antworten
  16. Carsten Walther am

    Ich liebe GridElements … gerade in Verbindung mit Bootstrap! Was ich leider noch nicht herausfinden konnte, wie kann ich Inhalte über Seiten hinweg vererben?

    Habt Ihr ’nen Tipp?

    Antworten
  17. Frank Dinslaken am

    Hi Kristina,

    war das eine schwere Geburt.
    Zunächst mal solltet Ihr noch darauf hinweisen, das das Typoscript an der Stelle, wo der Menü-Marker befüllt wird, auf eine Page-ID verwiesen wird, die bei jedem eine andere sein kann:

    ….

    MENU = HMENU
    MENU {
    special = directory

    # !! Hier muss die Page-ID der Startseite gesetzt werden, in meinem Fall war es nämlich die 1!

    special.value = 1
    entryLevel = 1
    1 = TMENU

    1 {

    Das gleiche gilt für das „Befüttern“ des Footer-Inhalts, der seinen Inhalt aus dem Footer-CEs einer bestimmten Seite (mit einer bestimmten ID) bezieht/koiert.

    Beim Subpart »Logo« ist noch ein kleiner Pfadfehler, da steht „/fileadmin/…“ der erste Slash muß weg. Dann erscheint das Logo.

    Jetzt stürze ih mich auf die Gridelemente/Backend-Layouts.

    Ansonsten kann ich Euch zu dem Projekt nur beglückwünchen.
    Macht Sinn sich mit dieser Materie eingehend zu beschäftigen.

    Grüße

    Frank

    Antworten
  18. Frank Dinslaken am

    Ich war so euphorisch, nachdem ich dieses Tutorial gefunden hatte.
    Leider wird mein Menü nicht gewrapt.
    Habe keine Ahnung mehr, wo ich noch suchen soll.
    Habe mittlerweile das Root-TS ins Root-Setup kopiert.

    Hatte jemand das gleiche Problem?

    Grüße

    Frank

    Antworten
    1. Kristina Dahl am

      Hallo Frank,

      poste doch mal den Link zu deiner Seite, dann können wir mal einen Blick darauf werfen.

      Viele Grüße

      Kristina

      Antworten
  19. Philipp Stranghöner am

    Hallo Tom,

    danke für deine Lob zur Respnisve Vorlage.

    Leider gibt es keine Möglickheit ein bestimmtes Element in einem Grid vorzuschreiben.

    Da bleibt dir nichts anderes übrig, deinen Redakteuren dieses zu erklären ;-)

    Viele Grüße Philipp

    Antworten
  20. Tom am

    Hallo,
    danke für eure Vorlage!
    Eine Frage zu den gridelements, besteht die Möglichkeit hier in einem gridelement nur bestimmte Datensätze zuzulassen?
    Also in meinem gridelement grid1 möchte ich als Inhalt nur ein vordefiniertes FCE zulassen. Kann man das einschränken oder muss man seinen Redakteuren erklären das in diesem bestimmten Element nur ein bestimmtes FCE eingesetzt werden darf?
    Ich hoffe ihr versteht mein Anliegen und könnt mir weiterhelfen, schonmal vielen Dank!
    vg Tom

    Antworten
  21. Maddin am

    Kann mir jemand bitte kurz erklären, was denn genau der Unterschied zwischen den von Typo3 mitgelieferten „Backend Layouts“ und der Erweiterung „grid_elements“ ist? Ich dachte immer bisher, die extension gridelements wird das alle steuern, ohne dass ich die Backend Layouts überhaupt benötige.

    Antworten
  22. Dennis am

    Hatte das Problem, dass TS nicht funktioniert hatte.
    Nach ein paar Stunden hab ich gemerkt, dass ich das statische Template nicht eingebunden hatte -.- Also an alle, die das gleiche Problem mit TS haben, guckt nach, ob ihr es eingebunden habt…

    Antworten
  23. Thomas am

    Hallo allerseits,

    habe das gleiche Problem wie Du, alex.
    Konntest Du auflösen woran es lag?

    Danke & Grüße,
    Thomas

    Antworten
  24. Sven am

    Hallo,
    erstmal dickes Lob für die tolle Vorlage!!!

    Ich versuche diese gerade auf meinem eigenen Typo3 System zu installieren.
    Leider habe ich aber ein paar Probleme mit den Grid Elements.
    Scheinbar werden die Grid Elements aus „CE Backend Layouts.txt“ direkt
    im root.t3s über ihre entsprechende PID referenziert. Hier wäre
    es evtl. schön eine Übersicht zu haben welches Grid Layout
    welche PID im Daten Ordner haben muss, bzw. wo man dass ändern muss.
    Hier ist glaube ich bei mir noch was verfrickelt und ich bekomme
    es nicht hin (Auch war mir nicht so ohne weiteres klar das der Footer
    von der Page mit der PID 13 kommt).

    Noch ein paar kleine Anmerkungen:
    – In fonts.css sind nicht alle font Angaben mit relativen Pfaden versehen
    – Im root.t3s wird logo.png absolut referenziert

    Aber ansonsten: Bombe!

    Antworten
    1. Philipp Stranghöner am

      Hallo Sven,

      die Vorlage war als kleine Anregung gedacht, damit man sich mit einfachen Mitteln eine Website in TYPO3 aufbauen kann. Natürlich muss diese dann noch jeder nach seinen Bedürfnissen anpassen.

      Wir werden deine Anregung mit in die Anleitung aufnehmen.

      Das der Footer an der ID 13 hängt, haben wir in der root.t3s mit einem Kommentar kenntlich gemacht.

      Viele Grüße
      Philipp

      Antworten
  25. Frederik Kunze am

    Hallo Nadja,
    ich hatte das Einstiegslevel deaktiviert da das Menu ja durch die statische Angabe „special.value =“ bereits gesetzt wurde.
    Bei mir sieht die Seitenstruktur aus wie folgend:

    Typo3 ID=0
    -Root ID=1
    –Home ID=2

    Die Home ID ist also scheinbar die selbe wie bei eurer Seite . Deshalb wundert es mich das ihr als Standardwert „special.value = 3“ in der root.t3s benutzt statt „special.value = 1“ da ja alles unterhalb des Rootlevels abgebildet werden soll. Dieses Problem habe ich ja nun aber bereits gelöst weiterhin bleibt bei mir das Problem das Kein Content abgebildet wird bitte kontaktiere mich doch einmal per Mail damit ich euch Zugangsdaten zukommen lassen kann.

    Gruß Frederik

    Antworten
  26. Frederik Kunze am

    Hallo,
    ich habe eure Vorlage auf meine Typo3 Installation aufgespielt allerdings habe ich Probleme mit dem Wrapper und der Navbar.

    Der Wrapper wird zwar abgebildet aber nicht mit Content befüllt.

    Die Navbar wird nur durch editieren der root.t3s in Zeile 310 durch Ändern des special.value auf 1(Das Rootverzeichniss – von dort soll das Menu abgeblidet werden-) und durch auskommentieren des entryLevel in Zeile 311 funktionsfähig.

    Einen Zugangskonto kann ich euch gern zukommen lassen wenn ihr mich kurz unter f.kunze@geek-o.de anmailt.

    Antworten
    1. Nadja Krakow am

      Hallo Frederik,

      vermutlich hast Du Deine Seitenstruktur anders angelegt als unsere. Wir haben unsere Seiten „Home“ etc. als Unterseiten der Rootseite angelegt. Da Du das Einstiegslevel in Deinem TypoScript ändern musstest, gehen wir davon aus, dass Du deine Seiten gleichberechtigt zur Rootseite angelegt hast.

      Viel Grüße
      Nadja

      Antworten
  27. alex am

    hallo,

    ich habe meinen Fehler übrigens gefunden, mithilfe von Andy Hausmann, es war ein kleiner Fehler im restlichen TS.. – sorry, aber es war natürlich mein Fehler.. ;)

    Antworten
  28. lars am

    Hallo,

    leider funktioniert Gridel Ements (v1.3.12) bei mir unter TYPO3 4.7 nicht so wie es sollte.

    Ich kann innerhalb eines Grid Elements ein Content Element anlegen, was dann auch im Frontend angezeit wird.

    Im Reiter „Erweitert“ bekomme ich dann allerdings die Fehlermeldung „AKTULLER WERT IST NICHT ERLAUBT“ unter Raster-Container.

    Weiterhin fehlerhaft: bei einem Content Element kann ich das Grid Element nicht angeben – der Wert wir unter „Spalte“ nicht übernommen.
    Lediglich Ausschneiden und Einfügen hilft…

    Das gleiche Problem habe ich bei der – übrigens sehr gelungenen – Responsive-Vorlage von Mittwald…

    Habt Ihr ein ähnliches Problem? Setzt Ihr Gridel Ements trotzdem ein?

    Viele Grüße
    Lars

    Antworten
  29. alex am

    Achja, wenn du möchtest, kannst du einen Zugang zum Testsystem haben.. – alex@trinidub.de

    Antworten
  30. alex am

    Hi Danke nochmal für deine Antwort.

    Das einzige was nicht greift ist das TS. Die Spalte uns so werden dargestellt und ausgegeben, mit Inhalt natürlich.

    Das backend_layout ist das von dir..

    hier das verwendete TS:

    tt_content.gridelements_pi1.20.10.setup {
    # ID of gridelement
    1 < temp.gridelements.defaultGridSetup
    1 {
    columns {
    # colPos ID
    11 < .default
    11.wrap = |
    # colPos ID
    12 < .default
    12.wrap = |
    }
    wrap = |
    }
    }

    Antworten
  31. Andy Hausmann am

    Grüße und sorry, dass ich erst so spät auf dein Problem antworte, alex.

    Stell in jedem Fall sicher, dass die ID des CE Backend Layout (gridelement) auch gleich dem TypoScript Objekt-Pfad ist.

    Lautet also dein TS exemplarisch wie folgt:

    tt_content.gridelements_pi1.20.10.setup {
    # 2 Columns (2 x 50%)
    # 1 equals the CE Backend Layout uid
    1 < temp.gridelements.defaultGridSetup
    1 {
    columns {
    11 < .default
    11.wrap = |
    12 < .default
    12.wrap = |
    }
    wrap = |
    }
    }

    muss dein CE Backend Layout(gridelement) die uid 1 aufweisen – im Backend einfach mit der Maus auf dem Icon des Datensatzes halten.

    Dazu dann noch das in diesem Fall passende backend_layout des gridelements:

    backend_layout {
    colCount = 2
    rowCount = 1
    rows {
    1 {
    columns {
    1 {
    name = Column 1
    colPos = 11
    }
    2 {
    name = Column 2
    colPos = 12
    }
    }
    }
    }
    }

    Wenn du genau das beachtest, kann nichts schief gehen.

    Antworten
  32. alex am

    ja, schade, trotzdem danke für die Antworten… ;)

    Antworten
  33. alex am

    hi,

    ja natürlich habe ich die 1zu1 Kopie verwendet. Allerdings benutze ich keinen Account von euch zu testzwecken.

    Es wird auch alles ausgegeben, allerdings kein Wrap.. – An was kann denn das liegen?

    Antworten
    1. Nadja Krakow am

      Hi Alex,
      wie Philipp bereits gesagt hat, können wir, ohne uns deinen Account anzusehen, leider keine genaue Diagnose stellen. Die Anzahl der möglichen Ursachen für dieses Problem ist sehr groß und so können wir leider nur spekulieren.
      Die 1zu1 Kopie war auf unser bereitgestelltes Script bezogen – dieses haben wir aus unserer Vorlage, in der es einwandfrei funktioniert, übernommen. Auch in anderen TYPO3 Installationen tritt bei uns mit diesem TypoScript kein Fehler auf.

      Antworten
  34. Philipp Stranghöner am

    Hallo Alex,

    leider können wir ohne uns den Account näher anzuschauen keine Aussage treffen, warum es nicht funktioniert. Das im Artikel gezeigt TS ist eine 1zu1 Kopie aus unserer Portfolio Vorlage. In der Vorlage funktioniert das TS ohne Probleme.

    Gruß Philipp

    Antworten
  35. alex am

    hi,

    ja, habe ich:

    backend_layout {
    colCount = 2
    rowCount = 1
    rows {
    1 {
    columns {
    1 {
    name = Spalte 1
    colPos = 1
    }
    2 {
    name = Spalte 2
    colPos = 2
    }
    }
    }
    }
    }

    Antworten
  36. Philipp Stranghöner am

    Hallo Alex,

    hast du den einzelnen Spalten in den CE-Layouts auch eine colPos (Zellennummer) geben? Damit das TS überhaupt 1,2 und 3 wrappen kann?

    Gruß Philipp

    Antworten
  37. alex am

    ja, die div um das | sind schon wieder raus…

    Antworten
  38. alex am

    oh je, grad seh ich dass die div raus sind.. – das ist das orginalscript vom Artikel gewesen.. – sorry. Das heisst es wird nicht gewrappt. Ich habe den Divs auch einfach mal class mitgegeben… in etwa so |

    Antworten
  39. Andy am

    Mein gepostetes TS sieht schon etwas crazy aus, zugegeben.

    Hier mal die gridelements-Implementierung der Twitter Bootstrap-Elemente in GISTs geworfen:

    Tabs –
    Accordion –

    Ich bitte zu berücksichtigen, dass es eher als Preview und Test zu verstehen ist – funktioniert in einem Dummy-Projekt jedoch hervorragend. Verbesserungsvorschläge sind erwünscht.

    Antworten
  40. Andy am

    Mit gridelements kann man jedenfalls gut Schindluder treiben. Aus Spaß habe ich mal die Twitter Bootstrap Tabs implementiert:

    # Tab Container
    6 < temp.gridelements.defaultGridSetup
    6 {
    prepend = COA
    prepend {
    10 = CONTENT
    10 {
    table = tt_content
    select {
    selectFields = header, uid
    where = CType='gridelements_pi1'
    andWhere = tx_gridelements_backend_layout=7
    }
    renderObj = COA
    renderObj {
    5 = LOAD_REGISTER
    5 {
    Counter.cObject = TEXT
    Counter.cObject.data = register:Counter
    Counter.cObject.wrap = |+1
    Counter.prioriCalc = intval
    }
    10 = TEXT
    10 {
    field = header
    insertData = 1
    wrap = |
    outerWrap.cObject = CASE
    outerWrap.cObject {
    key.data = register:Counter
    default = TEXT
    default.value = |
    1 = TEXT
    1.value = |
    }
    }
    }
    wrap = |
    }
    #20
    }
    columns {
    11 < .default
    11 {
    wrap = |
    renderObj {
    5 = LOAD_REGISTER
    5 {
    CounterEls.cObject = TEXT
    CounterEls.cObject.data = register:CounterEls
    CounterEls.cObject.wrap = |+1
    CounterEls.prioriCalc = intval
    }
    stdWrap.insertData = 1
    stdWrap.outerWrap.cObject = CASE
    stdWrap.outerWrap.cObject {
    key.data = register:CounterEls
    default = TEXT
    default.value = |
    1 = TEXT
    1.value = |
    }
    }
    }
    }
    outerWrap = |
    }

    # Tab Element
    7 < temp.gridelements.defaultGridSetup
    7 {
    columns {
    11 < .default
    11 {
    }
    }
    }

    War eine gute Abwechslung zur Implementierung eines eigenen CE-Typs via Extension – was natürlich auch derbst viel Spaß mit Fluid macht!

    Wie bekannt, ist das gridelements Killer-Feature das Drag and Drop im Backend. Episch!

    Antworten
  41. Andy am

    Welche Wraps erwartest du denn genau?

    In dem geposteten TS Setup lässt sich ja nur folgendes finden: wrap = |

    Das gibt dann auch keinen Wrap aus.

    Antworten
  42. alex am

    Hallo,

    das TypoScript greift gar nicht – die wraps werden nicht ausgegeben. Die Datensätze werden ordnungsgemäß ausgegeben. Mein Typo3 ist 4.6.7, php 5.3, alles passt soweit.

    Antworten
  43. alex am

    hallo,

    das TS hier funktioniert nicht richtig.. –
    mir ist klar, dass dieses TS für das erste GridElement gedacht ist..

    tt_content.gridelements_pi1.20.10.setup {
    1 < temp.gridelements.defaultGridSetup
    1 {
    wrap = |
    columns {
    1 < .default
    1.wrap = |
    2 < .default
    2.wrap = |
    3 < .default
    3.wrap = |
    }
    }

    schönen Gruß – alex

    Antworten
    1. Nadja Krakow am

      Hallo Alex, was genau funktioniert denn nicht?

      Antworten

Kommentar hinzufügen