Zum Inhalt springen

2 spaltiges Fluid-Template

Erstellt am 31. Dezember 2013 · 24 Antworten · letzte Antwort am 5. Januar 2014 · Seite 1 von 2

Tags: Fluid, ViewHelper, TYPO3 4.x, Frage

WimDim ·

Nein, leider auch nicht. Das bleibt bei "right".
Gibt es keine Möglichkeit, hier:

page.10 = FLUIDTEMPLATE
page.10 {
  partialRootPath = fileadmin/templates/partials/
  layoutRootPath = fileadmin/templates/layouts/

  variables {
    headertext < styles.content.get
    headertext.select.where = colPos = 0

    content_left < styles.content.get
    content_left.select.where = colPos = 1
    content_left.renderObj.stdWrap.wrap = <div class="left"> | </div>

    content_right < styles.content.get
    content_right.select.where = colPos = 2
    content_right.renderObj.stdWrap.wrap =  <div class="right"> | </div>
  }

}

eine Codezeile einzubauen, die alle Einträge immer Zeilenweise ausgibt? (Ich weiss, ist der "alte" Aufbau!)

Prinzipiell möchte ich lediglich ein 2-Spaltiges Layout, bei dem sich die rechte Spalte der linken Spalte in der Höhe automatisch anpasst. Wenn es dafür eine Lösung gibt, wäre mir sehr geholfen.

WimDim ·

Hallo Jenses,
über CSS wird das ja schon gesteuert, aber dafür muss ich die Reihenfolge halt immer abwechselnd haben. Ich würde das schon gerne über Typoscript und Templates machen, da nicht jeder (wenn auch nur wenige Leute) Javascript aktiviert hat. Gibt es denn da nicht eine Art "Split" oder so?

typix ·

Hallo zusammen,

ja, der Sprung von TYPO3 4.5 auf TYPO3 6.x ist offenbar selbst für die "alten Hasen" doch nicht ganz so einfach.

Das ist (fast) perfekt:

    page.10 = FLUIDTEMPLATE
    page.10 {
[Es fehlt]
    templateRootPath = fileadmin/templates/template/irgendwas.html
[/]
    partialRootPath = fileadmin/templates/partials/
    layoutRootPath = fileadmin/templates/layouts/
     
    variables {
    content_left < styles.content.get
    content_left.select.where = colPos = 1
     
    content_right < styles.content.get
    content_right.select.where = colPos = 2
    }
    }

Das ist Murks:

    headertext < styles.content.get
    headertext.select.where = colPos = 0

    content_left.renderObj.stdWrap.wrap = <div class="left"> | </div>
     
    content_right.renderObj.stdWrap.wrap = <div class="right"> | </div>
    }
    }

Warum? Ganz einfach. Wie ist der Standardaufbau einer Seite in HTML?

html
header
/header
body
Dein Code
/body
Footer
/Footer
/html

Oder so. Ich schreibe das jetzt nur aus dem Gedächtnis. Also bitte keine Meckerei über Details🙂

In anderen Worten: Hier will jemand Inhalte, die idR über das TS mit page.10.headerdata dem Header einer Seite zugewiesen werden, über die Ausgabe von headertext.select.where = colPos = 0 rendern lassen. Sorry, aber colPos = 0 ist die Spalte "Normal" im Body der Seite. Wie bitte soll TYPO3 Inhalte des Body in den Header schreiben????

2. Fehler:
Im TS bzw. im Setup der Page definiert man idR nur die Subparts, die dann von den Fluid-Templates gerendert werden. Die Idee mit:

 content_left.renderObj.stdWrap.wrap = <div class="left"> | </div>

kann nicht funzen.

CSS-Container werden mit Fluid bitte schön SO in den Templates zugewiesen:

<f:layout name="Default" />

<div class="left">
        <f:format.html parseFuncTSPath="">{content_left}</f:format.html>
</div>

Ob man diese Zuweisung nun im Haupttemplate, im Layout oder den Partials macht, bleibt jedem selbst überlassen.

Viele Grüsse

etux ·

Hallo typix,
Es ist keineswegs alles falsch, was Du sagst. 🙂
Eher hast Du was missverstanden, bzw. verwechselst Du paar Dinger. 😉
Ins Detail gehen, kann ich leider gerade nicht. Außerdem würde eine daraus entstehende Diskussion dem Thread hier nicht unbedingt dienlich. Da gebe ich Dir völlig Recht. 😉

WimDim ·

Hallo Zusammen und vielen Dank für die Informationen.
Ich kriege es leider beim besten Willen nicht hin, dass die Inhalte immer abwechselnd gezeigt werden. Ich möchte links einen kurzen Text und rechts dann eine lange Beschreibung. Beim nächsten Eintrag, soll der 2te kurze Text links erst unterhalb der Höhe des ersten Beschreibungstextes auf der rechten Seite erscheinen.

Also in etwa so:

1. Lorem Ipsum      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
                    et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
                    no sea takimata sanctus est Lorem ipsum dolor sit amet.

2. Lorem Ipsum      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
                    et justo duo dolores et ea rebum. Stet clita kasd gubergren, 

usw. ...

Anbei mal der Code, den ich bisher habe.

page.10 = FLUIDTEMPLATE
page.10 {
  partialRootPath = fileadmin/templates/partials/
  layoutRootPath = fileadmin/templates/layouts/

  variables {
    headertext < styles.content.get
    headertext.select.where = colPos = 1

    content_left < styles.content.get
    content_left.select.where = colPos = 2

    content_right < styles.content.get
    content_right.select.where = colPos = 3
  }

}

page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
  default = TEXT
  default.value = fileadmin/templates/twoColumn.html

  2 = TEXT
  2.value = fileadmin/templates/twoColumn.html
}

page.includeCSS {
  file1 = fileadmin/templates/css/style.css
}

und das Template:

<f:layout name="main" />
<f:section name="content">
  <div id="headertext"><f:format.html parseFuncTSPath="lib.parseFunc">{headertext}</f:format.html></div>
  <div id="left">
     <f:format.html parseFuncTSPath="lib.parseFunc">{content_left}</f:format.html>
  </div>
  <div id="right">
    <f:format.html parseFuncTSPath="lib.parseFunc">{content_right}</f:format.html>
  </div>
</f:section>

Vielen Dank für eure Mühe :-)

########################################## NACHTRAG ##########################################

Nach langem Ausprobieren, habe ich nun einen Aufbau über MARKER erstellt und auch hier erhalte ich wieder zuerst alle linken Elemente, dann alle rechten Elemente ist hier eine splittung der Content-Elemente vielleicht einfacher?

Anbei mal mein Typoscript:

page.stylesheet = fileadmin/templates/css/style.css

page.typeNum = 0
 
page.10 = TEMPLATE

page.10.template = FILE

page.10.template.file = fileadmin/templates/template.html

page.10.workOnSubpart = DOCUMENT_BODY

page.10.subparts {
     
HEADER = CONTENT
HEADER {
table = tt_content
select.orderBy = sorting
select.languageField = sys_language_uid
select.where = colPos = 1
renderObj < tt_content
}
 
LEFTCONTENT = CONTENT
LEFTCONTENT {
table = tt_content
slide = -1
select.orderBy = sorting
select.languageField = sys_language_uid
select.where = colPos = 2
renderObj < tt_content
renderObj.stdWrap.wrap = <div class="content_left"> | </div>
}
  
RIGHTCONTENT= CONTENT
RIGHTCONTENT {
table = tt_content
slide = -1
select.orderBy = sorting
select.languageField = sys_language_uid
select.where = colPos = 3
renderObj < tt_content
renderObj.stdWrap.wrap = <div class="content_right"> | </div>
}
    MENU = HMENU

    MENU.1 = TMENU
    MENU.1 {
        NO = 1
      wrap = <ul class="mainNav">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
              
      ACT < .NO
      ACT = 1
      ACT.wrapItemAndSub = <li class="active">|</li>
    }
     
    MENU.2 = TMENU
    MENU.2 {
        NO = 1
      wrap = <ul class="submenu">|</ul>
      NO.allWrap = <li class="subfirst">|</li>|*|<li>|</li>|*|<li class="sublast">|</li>
    }
}

Vielen Dank.

show.jpg

etux ·

So lange Du die Backend-Spalten einzeln im Template einbindest, wird das schwierig zu realisieren.
Theoretisch ginge es, die Inhaltselementen aus den zwei Backend-Spalten über TypoScript (oder im Fluid-Template) paarweise zu sortieren und an einer Stelle im Template einzubinden.
Noch einfache wäre es, wenn Du auch im Backend mit nur eine Spalte arbeitest.
Wobei Du dann nicht unbedingt Klassen bräuchtest – wie es auch ohne extra Klassen gehen könnte, siehst Du ja in meinem Beispiel (s. Beitrag vom 03.01.2014, 11:55).

WimDim ·

Hallo, ich hatte das mal ausprobiert wie du gesagt hattest, aber leider brauche ich die verschiedenen Klassen um die Darstellung rechts und links etwas unterschiedlich zu haben. Gibt es denn keine Möglichkeit, dies mit MARKERN und Typo3 zu erreichen?

etux ·

Also nochmal die einfachste Variante an Beispiel von Deinem TypoScript vom letzten Beitrag:
Wenn Du in der Backend-Spalte (colPos = 3) die Inhaltselemente so setzen würdest, wie die im generierten Quellcode erscheinen sollten (kurzer Text, Beschreibung, kurzer Text, Beschreibung, … usw.), dann bräuchtest Du nur noch bei „renderObj“ optionSplit anzuwenden:

renderObj.stdWrap.wrap = <div class="left"> | </div> || <div class="right"> | </div>

Wenn Du den „kurzen Text“ immer in einer Backend-Spalte setzest und die „Beschreibungen“ in einer anderen, dann müsstest Du die Inhaltselementen in TypoScript (oder spätestens im Fluid-Template) paarweise gruppieren – erstes Element aus der „Text-Spalte“ mit dem ersten Element aus der Spalte „Beschreibung“, zweites E. Aus „Text“ mit dem zweiten aus „Beschreibung“, usw.
Das würde sicher auch gehen, ist aber aufwendiger.

WimDim ·

Jetzt habe ich einen allgemeinen Content, und die beiden Backendspalten auf eine reduziert. Er gibt mir auch alle Inhalte aus, aber mit deinem Code kommt immer nur "<div class="left"></div>" und "right" gar nicht.
Anbei mal die Code-passage:

CONTENT = CONTENT
CONTENT {
table = tt_content
slide = -1
select.orderBy = sorting
select.languageField = sys_language_uid
select.where = colPos = 2
renderObj < tt_content
renderObj.stdWrap.wrap = <div class="left"> | </div> || <div class="right"> | </div>
}

Woran kann das liegen? Danke für die Hilfe :-)

etux ·

O.K. Den Link zur „split“-Funktion hatte ich Dir schon gepostet. 😉
Mach bitte folgendes:
Die Inhaltselementen der Spalte Rechts (colPos = 2) zuerst spliten:

lib.content < styles.content.getRight
lib.content {
  renderObj < tt_content
  renderObj {
    stdWrap {
      outerWrap = |###SPLITTER###
    }
  }
}

Dann den MARKER so umschreiben:

... {
  CONTENT = COA
  CONTENT {
    10 < lib.content
    stdWrap.split {
      token = ###SPLITTER###
      cObjNum = |*|1||2|*|3
      1.current = 1
      1.wrap = <div class="left">|</div>
      2.current = 1
      2.wrap = <div class="right">|</div>
      3.current = 1
      3.wrap =
    }
  }
}
WimDim ·

SUUUPER, vielen vielen Dank. Nun klappt es endlich. Wahnsinn :-) ...
Vielen Dank an euch Alle für die Hilfe und die Geduld :-)