Zum Inhalt springen

CE Layout abfragen und Inhalte ensprechend rendern

Erstellt am 12. Juni 2017 · 5 Antworten · letzte Antwort am 8. Juli 2017

Tags: Fluid, Inhaltselemente, TYPO3 7, Frage

mimii ·

Hallo ins Forum,

ich denke wohl grad n bisschen verquer und brächte mal n Denkanstoß. Wie bzw. wo frage ich am Besten ein von mir vergebendes header_layout ab. Ich habe mir in der TSConfi das angelegt und kann es auch beim einem CE anweden.

TCEFORM.tt_content.layout {
  altLabels.1 = Bootstrap Card
}

Ich arbeite mit fluid_styled_content und möchte jetzt die Ausgabe entsprechend anpassen, wenn für das CE eben dieses Layout ausgewählt wurde. Am liebsten wäre mir hierfür ein eigenes HTML Template. Kann man im root TS das über Conditions abfragen bzw. einbinden oder wäre es besser im Fluid Template (textmedia.html) zu hinterlegen?

Im root TS lege ich die fluid Template fest

lib.fluidContent
lib.fluidContent {
    templateRootPaths.20 = fileadmin/Resources/Private/fsc/Templates
    partialRootPaths.20  = fileadmin/Resources/Private/fsc/Partials
}

In der Textmedia.html habe ich derzeit

<div id="c{data.uid}" class="
    {f:if(condition:'{data.layout}==0',then:'')} 
    {f:if(condition:'{data.layout}==1',then:'card')}">
    ...

Die Klasse "card" wird auch ausgegeben, aber beim Rest scheitere ich :-/

Letzendlich möchte ich dieses (Boostrap 4) HTML haben

<div class="card">
    <img class="card-img-top" src="..." alt="Card image cap"> 
    // das aber nur, wenn auch tatsächlich ein Bild hinterlegt wurde
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>

Ich steh da völlig auf dem Schlauch wie ich das machen könnte und freue mich über jede Hilfe und Anregung.

Danke und viele Grüße
mimii

Teisinger ·

du musst die Layout ID dem Fluid mitteilen per variable zum Beispiel.

zum Beispiel so:

10 = FLUIDTEMPLATE
  10 {
    # default wert - kann auch temp oder text etc sein
    format = html

    # Ein Template - in unserem Beispiel OneColumn.html - kann immer nur ein Layout laden. ... einen Rahmen um unser HTML legen.
      # Ein Template kann mehrere Partial's beinhalten
      # Ein Partial ist eine Auslagerung von wiederkehrenden Definitionen
    file = fileadmin/template/Html/Templates/OneColumn.html
    partialRootPath = fileadmin/template/Html/Partials/
    layoutRootPath = fileadmin/template/Html/Layouts/

    variables {
      # "layout" ist im Template verfügbar beinhaltet ID des Backendlayouts
      layout = TEXT
      layout.data = levelfield:-1,backend_layout_next_level,slide
      layout.override.field = backend_layout

In fluid kannst du dann das so abfragen:

<f:if condition="{layout} == 'pagets__1'">
mimii ·

Hallo nochmal,

danke für deine Antwort. Ich versteh's grad nicht so ganz :-/. Ich möchte ja kein BE-Layout abfragen. Die sind eingerichtet (2 Spalten, 3 Spalten, 4 Spalten) und laufen einwandfrei. Ich möchte dem Redakteur die Möglichkeit geben einem CE, das innerhalb einer Spalte erfasst wird, über den Reiter "Erscheinungsbild" das Layout "Card" einzurichten und das CE soll dann eben entsprechend gerendert werden.

THX und Gruß
mimii

Teisinger · · Beste Antwort

achso, das kannst du fast genauso lösen - in fluid kannst du das layout abfragen.
In fluid ist halt dein Layout als ID abgespeichert das heißt wenn du sowas schreibst wie 200 = meinLayout
dann kannst du in fluid das layout abfragen und bekommst als "antwort" 200 raus.

Damit kannst du dann ein if oder ein switch basteln das je nach ID dann halt was ausgibt.

Habe jetzt auf die schnelle kein Bsp gefunden. Du kannst aber mal schauen was du alles zur verfügung hast mit <f:debug>{data}</f:debug> als beispiel.

wenn es da einen Punkt data.layout gibt kannst du das z. B. so abfragen:

<div {f:if(condition: '{data.layout} == 200', then: 'class="font-header"')}>

mimii ·

Hallo,

danke für die Antwort. Funktioniert, ich schreibe die textmedia.html nun einfach um.

Im fluid Template wird dann ja der Inhalt mit {date.bodytext}ausgegeben. Nun hätte ich hier noch gerne dass die <p> mit einer Klasse versehenwerden und das aber nur bei einem bestimmten Layout.

Ist das möglich?

Danke für n Tipp und Gruß
mimii

Teisinger ·

Rein theoretisch, allerdings kommt das p vom RTE.
Und mit dem steh ich selbst auf kriegsfuss - von daher sry, kann ich dir hierbei nicht helfen.
Außer du "trickst" und addest die class mit JavaScript.