Enable HTML in headings

In TYPO3 7 LTS with fluid_styled_content

By default, HTML code is not interpreted in headings, so that it is not possible, for example, to specifically place a line break in a heading using the <br> tag.

While before TYPO3 7 LTS you could enable this behavior via TypoScript when using css_styled_content, it works a little differently from TYPO3 7 LTS with fluid_styled_content.

Since fluid_styled_content realizes the output of the content elements via fluid templates, you can also start here and customize the output as desired. All the options that Fluid also offers via Viewhelper are available here.

Create a copy of the template file

As you should never change the original fluid_styled_content files, the first step is to create a copy of the file to be edited.

The output of the headings is controlled via the following file. This is a so-called partial:

typo3_src-7.6.xx/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Header/Header.html

For TYPO3 8 or newer, the path within typo3/sysext/... is identical.

Now create a directory for the partial below fileadmin/, e.g.

fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/Header/

Of course, you can also store the file within your own extension/sitepackage, e.g. in
typo3conf/ext/my_sitepackage/Resources/Private/Extensions/fluid_styled_content/Partials/Header/

Copy the file Header.html from the 1st directory into the previously created directory below fileadmin/

Now we have to tell TYPO3 where our copies of the partials are located. To do this, add the following line to your TypoScript setup:

In TYPO3 7:


lib.fluidContent.partialRootPaths.100 = fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/

From TYPO3 8:


lib.contentElement.partialRootPaths.100 = fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/

The number 100 can be freely chosen, but it must be greater than 10, as 0 and 10 are already used by fluid_styled_content!

Edit copied partial file

In Partial Header.html, the headings H1-H6 are now output via a switch-case view helper:

<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>

To ensure that HTML code is interpreted in the headings, the output within the heading tags can still be passed through the <f:format.raw> view helper:

<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>

Please note: the code examples of the Fluidtemplares refer to TYPO3 7. There may be differences in TYPO3 8 or newer.

This page contains automatically translated content.

Updated: 09.04.2025