Wrappen von Content-Elementen über Layout

Hallo ins Forum,

ich möchte Redakteuren die Möglichkeit geben das Aussehen von Elementen über Layout zu steueren. Im Hintergrund werden dafür CSS-Klassen vergeben. Es geht speziell um Layout mit table und table-cell. Folgende Layout-Typen, die ich im Page TS-Config eingerichtet habe:

TCEFORM.tt_content {
  layout{
    altLabels{
      0 = Normal
      1 = Tabellen-Layout
    }
    removeItems = 2,3,4,5,6,7,8,9,10
  }
}

Den einzelnen Inhaltselementen erhalten über Layout 1 ein <div class="layoutTableCell_50">.

lib.contents < styles.content.get
lib.contents {
  renderObj.stdWrap.wrap.cObject = CASE
  renderObj.stdWrap.wrap.cObject {
    key.field = layout
    1 < tt_content.stdWrap.innerWrap.cObject.default
    1 = TEXT
    1.value = <div class="layoutTableCell_50">|</div>
  }
}

Soweit kein Problem.

Nun soll noch noch umfassend für jeweils zwei "Zellen", also zwei <div class=class="layoutTableCell_50"> automatisch ein <div class="layoutTableRow"> erstellt werden und letzendlich muss noch um das gesamte Konstrukt ein weiterer wrap mit <div class="layoutTable"> gesetzt werden. Der HTML-Code sollte dann so aussehen.

<div class=class="layoutTable">
  
  <div class=class="layoutTableRow">
    <div class=class="layoutTableCell_50">
     <h1>Übersschrift</p>
     Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
    </div>
    <div class=class="layoutTableCell_50">
     <h1>Übersschrift</p>
     Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
    </div>
  </div>

  <div class=class="layoutTableRow">
    <div class=class="layoutTableCell_50">
     <h1>Übersschrift</p>
     Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
    </div>
    <div class=class="layoutTableCell_50">
     <h1>Übersschrift</p>
     Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
    </div>
  </div>

  <div class=class="layoutTableRow">
    <div class=class="layoutTableCell_50">
     <h1>Übersschrift</p>
     Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
    </div>
    <div class=class="layoutTableCell_50">
     <h1>Übersschrift</p>
     Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
    </div>
  </div>

</div>

Vielen Dank für Eure Hilfe und Gruß
mimii

Hi,

lib.contents < styles.content.get
lib.contents {
  wrap = <div class="layoutTable">|</div>
  renderObj.stdWrap.wrap.cObject = CASE
  renderObj.stdWrap.wrap.cObject {
    key.field = layout
    1 < tt_content.stdWrap.innerWrap.cObject.default
    1 = TEXT
    1.value = <div class="layoutTableCell_50">|</div>
    1.wrap = <div class="tablecell_50">|</div>
  }
}

Hi auch,

das geht so leider nicht, da dann dann das <div class="layoutTable"> um ALLE Content-Elemente der Seite gelegt wird. Es gibt aber auch "normalen" Content-Elemente auf der Seite ( also diejenigen, die kein <div class="layoutTableCell">haben ), um die soll kein wrap rum. Es soll NUR um die Elemente die <div class="layoutTableCell"> haben.

Sorry, falls das in der Beschreibung oben nicht ganz klar war. Hier nochmal das HTMl, etwas deutlicher.

    .... normale Contentelemente (ohne layoutTable), z.B. <div> oder <h2> oder <p> ....


    <div class="layoutTable">
     
      <div class="layoutTableRow">
        <div class="layoutTableCell_50">
          <h1>Übersschrift</p>
          Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
        </div>
        <div class="layoutTableCell_50">
          <h1>Übersschrift</p>
          Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
        </div>
      </div>
     
      <div class="layoutTableRow">
        <div class="layoutTableCell_50">
          <h1>Übersschrift</p>
          Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
        </div>
        <div class="layoutTableCell_50">
          <h1>Übersschrift</p>
          Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
        </div>
      </div>
     
      <div class="layoutTableRow">
        <div class="layoutTableCell_50">
          <h1>Übersschrift</p>
          Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
        </div>
        <div class="layoutTableCell_50">
          <h1>Übersschrift</p>
          Text oder Text mit Bild oder Bilder oder .... (die üblichen Content-Elemente)
        </div>
      </div>
     
    </div>

    .... weitere normale Contentelemente (ohne layoutTable), z.B. <div> oder <h2> oder <p> ....

Gruß
mimii

Hi,
probier mal folgendes:

lib.contents < styles.content.get
lib.contents {
  renderObj.stdWrap.wrap.cObject = CASE
  renderObj.stdWrap.wrap.cObject {
    key.field = layout
    1 < tt_content.stdWrap.innerWrap.cObject.default
    1 = COA
    1 {
        wrap = <div class="layoutTable">|</div>
        1 = TEXT
        1.value = <div class="layoutTableCell_50">|</div>
        1.wrap = <div class="tablecell_50">|</div>
  }
}

ist sicherlich nicht die schönste Lösung, nur fällt mir da auf die Schnelle nichts anders ein.

Danke für die Antwort,

funktioniert leider nicht so wie ich es bräuchte. Der default wrap (tt_content.stdWrap.innerWrap.cObject.default) wird auch um andere Content-Elemente gepackt, die ich z.b. über gridelements gewrapt habe. Die dürfen natürlich nicht mit ins layoutTable. Warum das passiert ist mir jedoch nicht ganz klar, da diese eigentlich kein Layout 1 haben, sondern Layout "normal".

Die Content-Elemente die weder Layout 1 noch über gridelements gewrapt sind haben jedoch keinen default wrap.

Ich versteh's nicht ganz :-/

Gruß
mimii

p.s. ich bin jetzt auf dem Weg es über einen Zähler zu machen
(#116691), um jeweils zwei Elemente mit Layout 1 mit einem wrap zu umschließen. Aber auch hier komme ich nicht wirklich weiter.

Wenn jemand noch ne Idee hat, nur her damit.

Viele Grüße
mimii