remind/typo3-headless

This package is abandoned and no longer maintained. The author suggests using the remind/headless package instead.

REMIND - Headless

3.0.0 2023-06-22 08:15 UTC

Requires

• php: ^8.2
• friendsoftypo3/headless: ^4.1
• ichhabrecht/content-defender: ^3.4
• typo3/cms-core: ^12.4

Requires (Dev)

• apache-solr-for-typo3/solr: ^12.0
• phpmd/phpmd: ^2.13
• slevomat/coding-standard: ^8.12
• squizlabs/php_codesniffer: ^3.7

GPL-3.0-or-later

• REMIND GmbH
• David Mellen

README

This extension provides:

• base content elements
• additional fields for pages and tt_content (e.g. items)
• extended flex form processor
• image processing middleware
• base configuration for form_framework
• a default backend layout

Installation

Use comoser to install the extension using composer install remind/headless. Import typoscript in your provider extension.

Add the following to your site config:

headless: true

Dependencies

Required dependencies are headless and content-defender. The latter is used in the default backend layout.

Backend Layouts

Default

The default layout consists of 1 column with 3 rows. Besides the main content (colPos = 0) there is also one column for content above the breadcrumbs (colPos = 1) and the footer (colPos = 10).

The content defender extension is used to only allow exactly one footer_content content element in the footer column. The footer_content content element can not be used in the other columns.

TCA

tt_content

tx_headless_item

Field of type inline. Basically tx_headless_item acts like tt_content without a colPos. Used for accordion and tabs. See one of these definition on how to use items and override the showitem definition.

To add a flexform to an item add the following configuration to TCA/Overrides/tx_headless_item.php:

$GLOBALS['TCA']['tx_headless_item']['columns']['flexform']['config']['ds']['<tt_content CType>'] = '<Path to flexform xml file>';

The flexform column has to be added to showitem of the respective tt_content type as well. For example, to add a flexform to the accordion type the following must contain the flexform column:

$GLOBALS['TCA']['tt_content']['types']['accordion']['columnsOverrides']['tx_headless_item']['config']['overrideChildTca']['types']['0']['showitem']

To ouput the flexform data in the frontend, the flexform field has to be added to the content elements typoscript. Example for modified Accordion.typoscript:

lib.accordionItems =< lib.items
lib.accordionItems {
    dataProcessing {
        10 {
            fields {
                flexform {
                    dataProcessing {
                        10 = Remind\Headless\DataProcessing\FlexFormProcessor
                        10 {
                            fieldName = flexform
                            as = flexform
                        }
                    }
                }
            }
        }
    }
}

tt_content.accordion =< lib.contentElementWithHeader
tt_content.accordion {
    fields {
        content {
            fields {
                items =< lib.accordionItems
            }
        }
    }
}

header_layout

Values for text, H1-H6 and hidden.

tx_headless_background_color

A background color for all content elements. Only option none exists per default. Add options per content element by using columnOverrides:

    'columnsOverrides' => [
        'tx_headless_background_color' => [
            'config' => [
                'items' => [
                    1 => [
                        'label' => 'Custom Color',
                        'value' => 'custom',
                    ],
                ],
            ],
        ],
    ],

tx_headless_background_full_width

Only visible if tx_headless_background_color is other than none. Used to extend the background color to full width instead of the content container only.

tx_headless_space_before_inside

Addition to space_before. Space before the content element, but inside the background color. Only available if tx_headless_background_color is other than none.

tx_headless_space_after_inside

Similar to space_before_inside.

pages

tx_headless_overview_label

An tx_headless_overview_label field is added to the page TCA. The field should be used to customize the label for the overview pages.

Crop Variants

ImageProcessingMiddleware accepts a breakpoint as a query parameter and uses a crop variant by that name if available. Appropriate crop variants have to be created for content elements.

Example for crop variants for breakpoints sm, md and lg for textpic:

$GLOBALS['TCA']['tt_content']['types']['textpic']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config'] = [
	'cropVariants' => [
		'sm' => [
			// configuration
		],
		'md' => [
			// configuration
		],
		'lg' => [
			// configuration
		],
	],
];

Example for crop variants for breakpoints sm, md and lg for accordion items:

$GLOBALS['TCA']['tt_content']['types']['accordion']['columnsOverrides']['tx_headless_item']['config']['overrideChildTca']['columns']['image']['config']['overrideChildTca']['columns']['crop']['config'] = [
	'cropVariants' => [
		'sm' => [
			// configuration
		],
		'md' => [
			// configuration
		],
		'lg' => [
			// configuration
		],
	],
];

Content Elements

accordion

Uses tx_headless_item, items consist of text (header, subheader, bodytext, title), a flexform field and images.

footer_content

Basic definition without any actual content fields. Add a flexform in your provider extension to use footer_content:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
    '*',
    'FILE:EXT:provider_extension/Configuration/FlexForms/FooterContent.xml',
    'footer_content'
);

tabs

Uses tx_headless_item, items consist of text (header, subheader, bodytext) only.