from https://blog.matthaa.de/rahmen-section_frame-frame_class-und-layouts-in-fluidtemplates/

gistfile1.txt

This is Google's cache of https://blog.matthaa.de/rahmen-section_frame-frame_class-und-layouts-in-fluidtemplates/. It is a snapshot of the page as it appeared on 22 Jun 2019 23:06:13 GMT. The current page could have changed in the meantime. Learn more.
Full versionText-only versionView source
Tip: To quickly find your search term on this page, press Ctrl+F or ⌘-F (Mac) and use the find bar.
TYPO3 Codebeispiele und Hilfen
matthaa.de – TYPO3 Support, Homepage Erstellung in Hannover und anderswo
Springe zum Inhalt

    Startseite
    Kontakt & Datenschutz
    TYPO3 Referenzen

Rahmen (section_frame / frame_class) und Layouts in Fluidtemplates

Das mit den Fluidtemplates ist zweifellos eine schöne Sache – hat man sich daran gewöhnt, weiß man sie wertzuschätzen. Allerdings ist es schon etwas tricky mit den altbekannten Rahmen (alt: section_frames, neu: frame_class) und Layouts (layout) – zumal sich das von Version 7.6 zu Version 8.7 erneut nicht unwesentlich geändert hat.

Hier ein paar Tipps für den Umgang damit in Version 8.7.

Zunächst holt man sich die „Rahmendatei“ Default.html aus /typo3/sysext/fluid_styled_content/Resources/Private/Layouts ins fileadmin Verzeichnis und macht das dem System per TypoScript bekannt:

lib.contentElement.layoutRootPaths.10 = fileadmin/template/fluid/Layouts

Ist die Datei erst einmal sozusagen im eigenen Zugriff, kann man sich die Standard Inhaltselemente genauer ansehen.

In jedem Datensatz unter „Erscheinungsbild“ finden wir eine Auswahl für „Layout“ und „Frame“. Im Prinzip machen beide das gleiche, nämlich den Rahmen um das Content Element mit einer bestimmten Klasse (bzw. mehreren Klassen) zu versehen. In Version 7.6 war die „Frame“ Auswahl verschwunden und die „layout“ Auswahl zwar vorhanden, jedoch passierte standardmäßig nichts auch wenn man eine Auswahl getroffen hatte. Das musste man selbst in den Templates definieren.

In TYPO3 8.7 sind die aus CSS_styled_content bekannten Klassen unter der „Frame“ Select-Box wieder vorhanden und auch eine Auswahl bei Layout versieht das Element mit einer bestimmten Klasse. Die Auswahl unter „Frame“ vergibt nicht nur eine Klasse, sondern sorgt per CSS dafür, dass das getan wird, was der Klassennamen aussagt, z.B. eine Linie vor oder nach dem Datensatz zu generieren (sofern das optionale statische Template Fluid Content Elements CSS eingebunden ist).

Will man mehr als diese Standards muss man folgendermaßen vorgehen:
Eigene Layout und Frame Klassen definieren und verwenden

Konfiguriert wird die Anzeige im Page TSConfig, die Ausgabe in der Default.html (s.o.).

Der folgende Beispiel Code benennt die 3 Layout Klassen um (auskommentiert ist eine weitere hinzugefügt), deaktiviert die Standard Frame Klassen und fügt zwei eigene hinzu:

TCEFORM {
    tt_content {
        layout {
            #addItems {
               #primary = weiße Box mit Rand
            #}
            altLabels {
                1 = Intro
                2 = Box grün
                3 = Box rot
            }
        }
        frame_class {
            removeItems = ruler-before, ruler-after, indent, indent-left, indent-right
            addItems {
                hintergrundbild-1 = Hintergrund 1
                hintergrundbild-2 = Hintergrund 2
            }
        }
    }
}

Mit den Klassen kann man im Fluidtemplate auf zweierlei Weise umgehen: man lässt sich den Klassennamen direkt ausgeben oder man setzt eine Condition. Letzteres, die Condition, kann man wiederum auf zwei verschiedene Arten verwenden.
Klassenname im Fluidtemplate ausgeben

Das geht sehr einfach mit:

{data.frame_class} bzw. {data.layout}

Wenn man sich die Default.html anschaut, sieht man auch, wo das hin muss. Wichtig zu wissen ist, dass der Klassenname im TSConfig Code definiert wird (identisch ist mit dem „key“ – s. unten stehenden Link), in unserem Beispiel also für den Frame: hintergrundbild-1 bzw. hintergrundbild-2. Die Standard keys, also auch die Klassennamen für das Layout sind 1, 2 und 3.
Klassenname als Condition im Fluidtemplate

Ebenfalls einfach, wenn man weiß wie:

class="{f:if(condition:'{data.layout}==1',then:'class1 class2',else:'class3')}"

Das else ist natürlich optional, kann aber nützlich sein. Wie man sieht kann man beliebig viele Klassennamen in einer solchen Condition angeben.
Condition im Fluidtemplate

Man kann auch eine „echte Condition“ anhand des ausgewählten Layouts oder Frames definieren:

<f:if condition="{data.layout}==1">
...
</f:if>

Zum Abschluss ein komplettes Beispiel. Hier kommt noch etwas Weiteres zum Einsatz und zwar ein Hintergrundbild, welches redaktionell in ein bestimmtes Verzeichnis gelegt wird. Der Dateiname wird in das Feld „Untertitel“ geschrieben. Dieses wird im TSConfig entsprechend umbenannt:

TCEFORM.tt_content.subheader.label = Bilddatei für den Hintergrund (muss im Verzeichnis template/hg liegen)

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:spaceless>
  <f:if condition="{data.frame_class} != none">
    <f:then>
      <section id="c{data.uid}" class="main fullscreen
        {f:if(condition:'{data.layout}==1',then:'style1 dark',else:'style2 dark')}
        {f:if(condition:'{data.layout}==2',then:'left')}
        {f:if(condition:'{data.layout}==3',then:'right')}
        {f:if(condition:'{data.layout}==4',then:'primary')}"
      <f:if condition="{data.subheader}">
      style="background:url('fileadmin/template/hg/{data.subheader}');"
       </f:if>
      >
      ...

Schön in diesem Zusammenhang ist, wenn man den folgenden Viewhelper im Default.html einbaut. Er zeigt dann alle zur Verfügung stehenden Felder des Datensatzes mit den entsprechenden Werten an. Ob und inwieweit man die standardmäßig zur Verfügung stehenden Felder so umbiegt muss man selbst entscheiden – kommt auf das Projekt und die Anforderungen an. Es gibt immer auch die Möglichkeit, eigene Contentelemente zu erstellen, z.B. mit der Extension dce.

<f:debug>{data}</f:debug>

Definierte Rahmen nach dem Update auf Version 8 – selbst wenn fluid_styled_content nicht verwendet wird

Hier ein Beispiel, wie es geht. Zwei in css_styled_content definierte Rahmen sollen in einem TYPO3 der Version 8 verwendet werden. Der folgende Code steht jeweils im Page TSConfig:

alt (definierte Rahmen bei TYPO3 Version 6):

TCEFORM.tt_content{
   section_frame.removeItems = 1,5,6,10,11,12
   section_frame.altLabels.20 = selbst definierter Rahmen eins
   section_frame.altLabels.21 = selbst definierter Rahmen zwei
}

neu (die in Version 6 definierten Rahmen nach einem Update auf TYPO3 Version 8):

TCEFORM.tt_content.frame_class {
   removeItems = ruler-before,ruler-after,indent,indent-left,indent-right
   addItems {
      custom-20 = selbst definierter Rahmen eins
      custom-21 = selbst definierter Rahmen zwei
   }
}

Um die bisherigen Klassennamen beibehalten zu können verwendet man noch dieses TypoScript:

tt_content.stdWrap.innerWrap.cObject.custom-20 =< tt_content.stdWrap.innerWrap.cObject.default
tt_content.stdWrap.innerWrap.cObject.custom-20.20.10.value = csc-frame csc-frame-frame1
 
tt_content.stdWrap.innerWrap.cObject.custom-21 =< tt_content.stdWrap.innerWrap.cObject.default
tt_content.stdWrap.innerWrap.cObject.custom-21.20.10.value = csc-frame csc-frame-frame2

Eine Gegenüberstellung der alten mit den neuen Bezeichnungen der frames findet man hier.

Verwendet man allerdings fluid_styled_content, so kann man die alten Klassennamen nur durch Änderung in der Datei Default.html (s.o.) erreichen, etwa so:

...
<div id="c{data.uid}" class="{f:if(condition:'{data.frame_class}==ruler-after',then:'csc-frame csc-frame-ruler-after')}" ... </div>
...

Möchte man die Auswahl von Klassen auf bestimmte Contentelemente einschränken, so könnte dieser Link hilfreich sein.

S. auch hier.
Die Frames „Space before“ und „Space after“

… die es in TYPO3 8 ja wieder gibt. Gesetzt man möchte die Selectbox „Space before“ ausblenden und die Selectbox „Space after“ konfigurieren, dann kann man in etwa folgendes ins TSConfig schreiben (selbsterklärend):

TCEFORM.tt_content {
    space_before_class.disabled = 1
    space_after_class {
        removeItems = small, medium, large, extra-large
        altLabels.extra-small = mein Abstand
    }
}

TYPO3 Standardframes in Gridelements verwenden

Wenn man die Extension Gridelements einsetzt und die TYPO3 Standardframes verwenden möchte, so benötigt man folgendes TypoScript (in diesem Beispiel wird wie oben die Selectbox „Space before“ nicht verwendet):

tt_content.gridelements_pi1.stdWrap.wrap = <div class="content-frame gridWrap frame-{field:frame_class} frame-layout-{field:layout} frame-space-after-{field:space_after_class}" id="c{field:uid}">|</div>
tt_content.gridelements_pi1.stdWrap.wrap.insertData = 1

Link
Dieser Beitrag wurde unter TYPO3 abgelegt am 7. Juni 2017 von Matthias.
Beitrags-Navigation
← Indexed Search und Crawler – Indizierung von PDFs und Verwendung von FE-Usergruppen off topic: das I Ging und die Technik Hotline der Telekom →
Suche
Suche nach:
Kategorien

    Angular
    Bootstrap
    CSS
    Design
    jQuery
    TYPO3
    Uncategorized
    Usability

TYPO3 Support

Sie benötigen Unterstützung in oder bei Ihrem TYPO3 Projekt?
Kontaktieren Sie mich!
Links

    Brauchbare kostenlose HTML5 Vorlagen
    Der Interaktionsdesigner
    Designtagebuch
    developerdrive
    Digital Inspiration
    Herausragende kostenlose Bilder
    Intro to CSS 3D transforms
    Lizenzfreie, sehr coole Bilder
    medblog
    One pager – Präsentationen in HTML
    Queness
    Snook
    Spectacular responsive site templates
    The Designwork
    TYPO3 Hilfen und Tipps Blog
    TYPO3 Info & Tutorials
    webdesign.tutsplus.com

TYPO3 Bronze Member
Stolz präsentiert von WordPress