The TYPO3 CMS is extremely powerful and infinitely configurable and customizable. These are great features in a CMS when your client asks the question "Can we do...on our site?" and you can always say yes. But sometimes the ability to customize the CMS anyway you want leads to some obscurity on the 'how' side of things. I've had cases when I know the customizing I want to do is possible, but finding out exactly how to do it is the problem. As with many OpenSource projects, the documentation although being adequate is often pretty thin on the 'how-to' portion. This can be compounded by breaking changes between major versions.
Recently I was the lead on a TYPO3 site migration from version 7 to version 9. Once the testing was done, scripts written and the migration completed there were some outliers as I expected. One of these outliers was related to migrating from the core layout extension css_styled_content to the newer extension fluid_styled_content as it related to the table content block. As the client worked through reviewing the site they spotted a page where they had a table with HTML formatting applied to the content (a list of links) in the table cells using the table content element.
Previous Table Content Rendering Method
In earlier versions of TYPO3, where you were using the css_styled_content extension, you needed to update the configuration and tell TYPO3 to parse or analyze the table content using the same function that analyses the content created by the rich-text-editor. You did this using a short snippet of TypoScript in the set-up part of your site template configuration.
#render html on tables
tt_content.table.20.innerStdWrap.htmlSpecialChars >
tt_content.table.20.innerStdWrap.parseFunc = < lib.parseFunc
This snippet would tell the page renderer to pass any cell content to lib.parseFunc which would render any valid HTML markup to the page. This was the problem. As a part of the site migration we also migrated away from css_styled_content which would render the table cells properly with this configuration snippet to the new fluid_styled_content extension that turned it's nose up at this configuration. So we need to change the configuration a different way.
New Table Rendering Method
With the new fluid_styled_content extension you are given much more control when it comes to how the standard content elements are rendered to the page. You can customize every aspect of content templates by creating a template extension or a folder of template files and configure the fluid_styled_content extension to use your custom templates.
In your extension set up, you will add a new set of paths for templates, partials and layouts to the fluid_styled_content set-up. This new setting will direct the fluid content extension to check for templates files in your custom extension directory but default back to the main extension files if it can't find an appropriate template file. So you can copy all or just one of the fluid content templates into your custom extension or folder on the server.
#new path for fluid_styled_content templates
lib.contentElement{
templateRootPaths{
200 = fileadmin/templates/fluid_content/Templates/
}
partialRootPaths{
200 = fileadmin/templates/fluid_content/Partials/
}
layoutRootPaths{
200 = fileadmin/templates/fluid_content/Layouts/
}
}
The number '200' in the above configuration snippet tells the system to give priority to your new custom templates over the default set of templates shipped with the fluid_styled_content extension. The path 'fileadmin/templates/fluid_content/...' tells the system where to search for the template files. If it doesn't find the file it is looking for it will check the next highest priority path which is the default location in my configuration.
Enable HTML in the Table Wizard: Custom Template
In my case, I needed to change the way the default table template was rendering the cell content to the page. As I dug around the table templates I found the partial file that was rendering the table cell content at the following location:
Resources/Private/Partials/Table/Columns.html
I copied that file to my custom location:
fileadmin/templates/fluid_content/Paritals/Table/Column.html
Now that had my copy of the template that needs to change I changed the rendering format for the cell content on line 48 from:
<f:if condition="{cell} != ''">
<f:then>
{cell -> f:format.nl2br()}
</f:then>
<f:else>
</f:else>
</f:if>
to:
<f:if condition="{cell} != ''">
<f:then>
<f:format.html>{cell}</f:format.html>
</f:then>
<f:else>
</f:else>
</f:if>
Now when it comes time to render a table created with the table wizard it will treat the cell content as HTML content and render it properly formatted.