How to enable header_position in TYPO3 7.6

Question

In versions prior to TYPO3 7.6 you could select a position for your header within your content element (left, middle, right as far as I remember).

The field which has been used for storing that information in tt_content header_position is still available.

However, it will not appear in the backend. I'm also using fluid_styled_content for rendering my content, and the Header partial doesn't contain any reference to the position, but only to the layout field.

My question is: How can I reenable that field and use it to position my headers?

Answer 1

The database field header_position is only included in the TYPO3 core extension css_styled_content. If you don't have that extension installed the field in the database is probably there because it was installed sometime before.

It is not advised to install css_styled_content and fluid_styled_content installed in parallel as some options can conflict.

If you want to use fluid_styled_content and have the header_position field available the best way to go would be to create a very small TYPO3 extension yourself that includes the necessary SQL definition for the column header_position, the appropriate TCA configuration for that column and a few bits of TypoScript to extend/override the „Partial” paths of fluid_styled_content.

Answer 2

You have to build a quick extension of yours which can reenable the field. You need to create folders and a file like following: your_ext/Configuration/TCA/Overrides/tt_content.php the contents of that file are:

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
ExtensionManagementUtility::addTCAcolumns('tt_content',[
    'header_position' => [
            'exclude' => 1,
            'label' => 'LLL:EXT:your_ext/Resources/Private/Language/locallang_db.xlf:tt_content.header_position',
            'config' => [
                    'type' => 'select',
                    'renderType' => 'selectSingle',
                    'items' => [
                            ['LLL:EXT:your_ext/Resources/Private/Language/locallang_db.xlf:tt_content.header_position.left', 'left'],
                            ['LLL:EXT:your_ext/Resources/Private/Language/locallang_db.xlf:tt_content.header_position.right', 'right'],
                            ['LLL:EXT:your_ext/Resources/Private/Language/locallang_db.xlf:tt_content.header_position.center', 'center']
                    ]
            ]
    ]   
]);

ExtensionManagementUtility::addFieldsToPalette('tt_content', 'header', '--linebreak--,header_position', 'after:header_layout');

ExtensionManagementUtility::addFieldsToPalette('tt_content', 'headers', '--linebreak--,header_position', 'after:header_layout');

Now the field should be back in the backend, because you've added it to the TCA via addTCAColumns to the tt_content configuration and added it via addFieldsToPalette to the header and headers palettes of tt_content, which are used by the types textmedia and header. You can find out more about this by using the Configuration module in the TYPO3 backend. You can see it, when you are logged in as admin. Also a good place to look and learn about the TCA is the TCA reference: https://docs.typo3.org/typo3cms/TCAReference/

Now you need to alter the fluid_styled_content templates. You need to create template overrides for the header partial of fluid_styled_content.

First create a folder: your_ext/Configuration/TypoScript and add a setup.txt and a constants.txt file. In setup.txt add the following lines:

lib.fluidContent{
    templateRootPaths{
         10 = {$plugin.your_ext.view.fluid_styled_content.templateRootPath}
    }
    partialRootPaths{
         10 = {$plugin.your_ext.view.fluid_styled_content.partialRootPath}
    }
    layoutRootPaths{
        10 = {$plugin.your_ext.view.fluid_styled_content.layoutRootPath}
    }
}

In constants.txt do:

plugin.your_ext{
    view{
        fluid_styled_content{
            templateRootPath = EXT:your_ext/Resources/Private/FluidStyledContent/Templates/
            partialRootPath = EXT:your_ext/Resources/Private/FluidStyledContent/Partials/
            layoutRootPath = EXT:your_ext/Resources/Private/FluidStyledContent/Layouts/
        }
    }
}

To enable your TypoScript, you need to add a ext_tables.php in your your_ext folder and give it the following one-liner:

TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY,'Configuration/TypoScript', 'Your Ext Template');

You need to include your static TypoScript to your page via the Template module to enable the change to fluid_styled_content

Now you can copy the templates you need from

typo3/sysext/fluid_styled_content/Resources/Private/Templates

typo3/sysext/fluid_styled_content/Resources/Private/Partials

typo3/sysext/fluid_styled_content/Resources/Private/Layouts

into your extensions folders you need to create:

your_ext/Resources/Private/FluidStyledContent/Templates

your_ext/Resources/Private/FluidStyledContent/Partials

your_ext/Resources/Private/FluidStyledContent/Layouts

Now you can alter the templates. For your header_position field, you probably just need to copy

typo3/sysext/fluid_styled_content/Resources/Private/Partials/Heaeder.html

to

your_ext/Resources/Private/FluidStyledContent/Partials/Header.html

and add your selected value as {data.header_position} to a div class and style that.

Keep in mind you do not need to copy all of the templates, because with the TypoScript you just defined another location for fluid to search for templates and take them, if they are available. If not, fluid will walk back the chain and take the templates that are defined at position 9 and lower. You can look into the TypoScript Object Browser by the Template module and look into the TypoScript variable lib.FluidContent to see, if your TypoScript include has worked.

Hope this helped a bit ;)