HTML in Überschriften ermöglichen
In TYPO3 7 LTS mit fluid_styled_content
Standardmäßig wird HTML-Code in Überschriften nicht interpretiert, sodass es zum Beispiel nicht möglich ist, gezielt einen Zeilenumbruch per <br>-Tag in einer Überschrift unterzubringen.
Während man vor TYPO3 7 LTS bei Verwendung von css_styled_content dieses Verhalten per TypoScript ermöglichen konnte, funktioniert es ab TYPO3 7 LTS mit fluid_styled_content ein wenig anders.
Da fluid_styled_content die Ausgabe der Inhaltselemente über Fluidtemplates realisiert, kann man hier auch ansetzen und die Ausgabe beliebig anpassen. Hier stehen einem alle Möglichkeiten offen, die Fluid auch über Viewhelper bietet.
Kopie der Template-Datei erstellen
Da man keinesfalls die Original-Dateien von fluid_styled_content verändern sollte, muss im ersten Schritt eine Kopie der zu bearbeitenden Datei angelegt werden.
Die Ausgabe der Überschriften wird über folgende Datei kontrolliert. Hierbei handelt es sich um ein sogenanntes Partial:
typo3_src-7.6.xx/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Header/Header.html
Bei TYPO3 8 oder neuer ist der Pfad innerhalb von typo3/sysext/... identisch.
Legen Sie jetzt ein Verzeichnis für das Partial unterhalb von fileadmin/ an, z.B.
fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/Header/
Natürlich können Sie die auch innerhalb einer eigenen Extension/eines eigenen Sitepackages die Datei ablegen, z.B. in
typo3conf/ext/my_sitepackage/Resources/Private/Extensions/fluid_styled_content/Partials/Header/
Kopieren Sie die Datei Header.html aus dem 1. Verzeichnis in das zurvor angelegte Verzeichnis unterhalb von fileadmin/
Nun müssen wir TYPO3 bekannt machen, wo unsere Kopien der Partials liegen. Fügen Sie dazu folgende Zeile in ihr TypoScript-Setup ein:
In TYPO3 7:
lib.fluidContent.partialRootPaths.100 = fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/
Ab TYPO3 8:
lib.contentElement.partialRootPaths.100 = fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/
Die Zahl 100 ist dabei frei gewählt, sie muss aber größer als 10 sein, da 0 und 10 schon von fluid_styled_content verwendet werden!
Kopierte Partial-Datei bearbeiten
Im Partial Header.html werden jetzt die Überschriften H1-H6 über einen switch-case-Viewhelper ausgegeben:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:switch expression="{layout}">
<f:case value="1">
<h1><f:link.typolink parameter="{link}">{header}</f:link.typolink></h1>
</f:case>
<f:case value="2">
<h2><f:link.typolink parameter="{link}">{header}</f:link.typolink></h2>
</f:case>
<f:case value="3">
<h3><f:link.typolink parameter="{link}">{header}</f:link.typolink></h3>
</f:case>
<f:case value="4">
<h4><f:link.typolink parameter="{link}">{header}</f:link.typolink></h4>
</f:case>
<f:case value="5">
<h5><f:link.typolink parameter="{link}">{header}</f:link.typolink></h5>
</f:case>
<f:case value="6">
<h6><f:link.typolink parameter="{link}">{header}</f:link.typolink></h6>
</f:case>
<f:case value="100">
<f:comment> -- do not show header -- </f:comment>
</f:case>
<f:case default="true">
<f:if condition="{default}">
<f:render partial="Header/Header" arguments="{
header: header,
layout: default,
link: link}" />
</f:if>
</f:case>
</f:switch>
</html>
Damit HTML-Code in den Überschriften interpretiert wird, kann die Ausgabe innerhalb der Überschriften-Tags noch durch den <f:format.raw>-Viewhelper geschleust werden:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:switch expression="{layout}">
<f:case value="1">
<h1><f:format.raw><f:link.typolink parameter="{link}">{header}</f:link.typolink></f:format.raw></h1>
</f:case>
<f:case value="2">
<h2><f:format.raw><f:link.typolink parameter="{link}">{header}</f:link.typolink></f:format.raw></h2>
</f:case>
<f:case value="3">
<h3><f:format.raw><f:link.typolink parameter="{link}">{header}</f:link.typolink></f:format.raw></h3>
</f:case>
<f:case value="4">
<h4><f:format.raw><f:link.typolink parameter="{link}">{header}</f:link.typolink></f:format.raw></h4>
</f:case>
<f:case value="5">
<h5><f:format.raw><f:link.typolink parameter="{link}">{header}</f:link.typolink></f:format.raw></h5>
</f:case>
<f:case value="6">
<h6><f:format.raw><f:link.typolink parameter="{link}">{header}</f:link.typolink></f:format.raw></h6>
</f:case>
<f:case value="100">
<f:comment> -- do not show header -- </f:comment>
</f:case>
<f:case default="true">
<f:if condition="{default}">
<f:render partial="Header/Header" arguments="{
header: header,
layout: default,
link: link}" />
</f:if>
</f:case>
</f:switch>
</html>
Bitte beachten: die Code-Beispiele der Fluidtemplares beziehen sich auf TYPO3 7. In TYPO3 8 oder neuer kann es hier Unterschiede geben.