Themes and visual_editor

visual_editor

Headliner is meant to be used together with visual_editor. visual_editor finds editable texts by the f:render.text ViewHelper; the header partial of Headliner keeps those calls, so the content elements of the core need no ViewHelper of Headliner in your templates. In a template of your own keep {record -> f:render.text(field: ...)} for the text and give the record to headliner:headline (see Your own templates).

Other themes

For a theme that does not use the header partial of fluid_styled_content, use the ViewHelpers (see Your own templates). The page module finds the headings in the rendered page whatever template produced them; only headers rendered with headliner:headline (or headliner:headline.values with edit) carry the data-headliner-edit mark and so can be changed in the box.

Themes with their own header templates (Camino)

The theme typo3/theme-camino renders the header of some content elements with partials of its own, not with the header partial of fluid_styled_content. It takes the tag from header_layout (1 to 6) and the look from a field of its own, and renders the subheader as a p. For these elements:

the fields Tag (header_tag) and Subheader tag (subheader_tag) are in the form, but have no effect in the frontend;
the box shows their headings, but only as a label: it cannot change their tag, because nothing in the template names the field (the mark data-headliner-edit is written by the ViewHelpers headliner:headline and headliner:headline.values).

This was seen with the content element Regular Text Element (text): it comes out as before with and without the site set, and the box lists its heading as a label.

The element types Header (header) and Bullet List (bullets) are different. Camino renders their header with its own markup, <p class="headline headline--small">. With the site set the partial of Headliner takes its place, so these headers come out as <h2 class="ce-headline-layout-2"> (with a subheader, <h3 ...>): the fields work and the box can change their tags, but the classes headline and headline--small of Camino are gone, and the look of these headers can change. Check the CSS, and style ce-headline-layout-N or hide the fields for these types (further down on this page) if you want to keep the markup of Camino. This was seen with a page of the layout Camino Contentpage.

Some of Camino's own element types do not render a heading unless the layout asks for one, so the box has nothing to list for them. The Text Teaser (camino_textteaser) and the three heroes (camino_hero, camino_hero_small, camino_hero_text_only) render <p class="headline"> with the layout Default, and an h1 to h6 only with the layout 1 to 6. Their subheader is always a p. The Text Media Teaser Grid (camino_textmedia_teaser_grid) renders its header as a p whatever the layout is, and the headers of its entries as <header>. The box lists headings (h1 to h6), so these do not appear in it.

To keep editors from setting a tag that does nothing, hide the two fields with the page TSconfig of your site (for example page.tsconfig in the site package or site set). A hidden field keeps its value, which is empty ("from the layout") for content that was never given a tag, so hiding it changes nothing in the frontend.

For all content elements. Without a type the rule applies to every element type. This is the right choice if the site is built on a theme like this and you do not use the tag fields anywhere:

page.tsconfig

TCEFORM.tt_content {
    header_tag.disabled = 1
    subheader_tag.disabled = 1
}

The fields then also disappear from the element types for which they would work (header, bullets and the others that use the header partial of fluid_styled_content), and those headings can no longer get a tag, neither in the form nor in the box.

For single element types. Put the type after types to hide the fields only there, and keep them for the others. Add a line per type (textpic, camino_hero, and so on):

page.tsconfig

TCEFORM.tt_content {
    header_tag.types.text.disabled = 1
    subheader_tag.types.text.disabled = 1
}

The subheader tag can also be switched off alone, for a whole site, with the site setting headliner.subheader.enabled.