Templating 

This extension enhances the existing TYPO3 content elements, which are commonly rendered with EXT:fluid_styled_content. Therefore, customized Fluid templates have to be provided by this extension.

It also works well with the Bootstrap Package.

In both cases, be sure to load the configuration of this extension after EXT:fluid_styled_content or EXT:bootstrap_package.

TypoScript setup 

You can configure the fragment identifier with TypoScript.

If you customize the templates, override the template paths of the content elements.

lib.contentElement {
    partialRootPaths.101 = EXT:content_slug/Resources/Private/Overrides/fluid_styled_content/Partials/
    templateRootPaths.101 = EXT:content_slug/Resources/Private/Overrides/fluid_styled_content/Templates/
}
Copied!

Fluid templates 

The customized Fluid templates contain some new variables and ViewHelpers to render the contents of the new fields.

Resources/Private/Overrides/fluid_styled_content/Partials/Header/All.html 

We need to transfer additional variables to Header.html:

<f:render partial="Header/Header" arguments="{
    header: data.header,
    layout: data.header_layout,
    positionClass: '{f:if(condition: data.header_position, then: \'ce-headline-{data.header_position}\')}',
    link: data.header_link,
    fragmentIdentifier: fragmentIdentifier,
    renderAnchorLink: data.tx_content_slug_link,
    default: settings.defaultHeaderType}" />
Copied!

Resources/Private/Overrides/fluid_styled_content/Partials/Header/Header.html 

Each heading (<h1> to <h5>) gets a new id attribute. It will contain the configured fragment identifier, if a fragment was set in the content element.

If a fragment exists and the checkbox "Set link to #anchor" is activated, an additional link will be rendered right to the header.

You can style this anchor through the class name and/or change the displayed symbol in the template.

<h1 id="{fragmentIdentifier}" class="{positionClass}">
    <f:link.typolink parameter="{link}">{header}</f:link.typolink>
    <f:if condition="{fragmentIdentifier} && {renderAnchorLink}"><a class="headline-anchor" href="#{fragmentIdentifier}">#</a></f:if>
</h1>
Copied!

Also important: if header_layout is set to default, the Header.html partial is called a second time. Therefore, we need to transfer our additional variables again:

<f:defaultCase>
    <f:if condition="{default}">
        <f:render partial="Header/Header" arguments="{
            header: header,
            layout: default,
            positionClass: positionClass,
            fragmentIdentifier: fragmentIdentifier,
            renderAnchorLink: renderAnchorLink,
            link: link}"/>
    </f:if>
</f:defaultCase>
Copied!

Resources/Private/Overrides/fluid_styled_content/Templates/MenuSection.html 

The TYPO3 content elements of CType "Section Index" and "Section Index of subpages from selected pages" both build a list of pages and their included content elements.

By default, the content elements will be linked by their unique id, e.g. https://www.example.org/a-sub-page/#c123.

The new Fluid condition will check if a fragment identifier is given for the content element.

If available, the configured fragment identifier is then rendered (identical to the anchor link in Header.html).

Otherwise, the default anchor to the content element is rendered (#c123).

<f:for each="{page.content}" as="element">
    <f:if condition="{element.data.header}">
    <li>
        <a href="{page.link}#{f:if(condition: '{element.fragmentIdentifier}', then: '{element.fragmentIdentifier}', else: 'c{element.data.uid}')}"
            {f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}">
            <span>{element.data.header}</span>
        </a>
    </li>
    </f:if>
</f:for>
Copied!