VITEC/VITEC-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Container Options

Browse Source
This commit is contained in:
Oliver Rasche
2026-08-14 10:36:36 +02:00
parent f515de54ad
commit c720696781
23 changed files with 584 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/vitec/Configuration/TCA/Overrides/tt_content_vitec_container.php
View File

@@ -34,6 +34,7 @@ use TYPO3\CMS\Core\Utility\GeneralUtility;
'--palette--;;general,
--palette--;;headers,
tx_vitec_bg_variant,
--palette--;LLL:EXT:vitec/Resources/Private/Language/locallang_containers.xlf:bg_image.palette;vitec_background,
pi_flexform;LLL:EXT:vitec/Resources/Private/Language/locallang_containers.xlf:container.flexform.label,
--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
--palette--;;frames,

88
packages/vitec/Configuration/TCA/Overrides/tt_content_vitec_shared.php
View File

@@ -27,6 +27,94 @@ use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
],
]);
// -------------------------------------------------------------------------
// Shared background image for the VITEC containers, with the two settings a
// background actually needs: how it scales and where it sits.
//
// Deliberately no crop variants (Clause 9.9): a background is framed by
// background-size / background-position in CSS, not by cropping the file.
// Cropping here would fight the two selects below.
//
// The values are written so the front end can hand them straight to CSS.
// `stretch` is the one exception - it has no CSS keyword and maps to
// `100% 100%`; spelled out here because "stretch" is what an editor looks
// for, not "100% 100%".
// -------------------------------------------------------------------------
ExtensionManagementUtility::addTCAcolumns('tt_content', [
'tx_vitec_bg_image' => [
'label' => $l . 'bg_image.label',
'description' => $l . 'bg_image.description',
'config' => [
'type' => 'file',
'maxitems' => 1,
'allowed' => 'common-image-types',
],
],
'tx_vitec_bg_size' => [
'label' => $l . 'bg_size.label',
// Re-renders the form when the value changes, so the "Size %" field
// below appears the moment "Custom" is picked instead of only after
// a save. FormEngine keeps the current form state across the reload
// (SingleFieldContainer -> ReloadOnFieldChange); whether it asks
// first is the editor's own "verify on change" preference.
'onChange' => 'reload',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
'items' => [
['label' => $l . 'bg_size.option.cover', 'value' => 'cover'],
['label' => $l . 'bg_size.option.contain', 'value' => 'contain'],
['label' => $l . 'bg_size.option.stretch', 'value' => 'stretch'],
['label' => $l . 'bg_size.option.auto', 'value' => 'auto'],
['label' => $l . 'bg_size.option.custom', 'value' => 'custom'],
],
'default' => 'cover',
],
],
// Only meaningful together with bg_size = custom, and hidden otherwise
// so the form never shows a percentage that has no effect. The renderer
// resolves it into the emitted `size` (e.g. "80%"), so the front end
// keeps getting one CSS-ready value instead of a second special case.
'tx_vitec_bg_size_percent' => [
'label' => $l . 'bg_size_percent.label',
'description' => $l . 'bg_size_percent.description',
'displayCond' => 'FIELD:tx_vitec_bg_size:=:custom',
'config' => [
'type' => 'number',
'size' => 6,
'default' => 100,
'range' => [
'lower' => 1,
'upper' => 500,
],
],
],
'tx_vitec_bg_position' => [
'label' => $l . 'bg_position.label',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
'items' => [
['label' => $l . 'bg_position.option.top_left', 'value' => 'left top'],
['label' => $l . 'bg_position.option.top_center', 'value' => 'center top'],
['label' => $l . 'bg_position.option.top_right', 'value' => 'right top'],
['label' => $l . 'bg_position.option.center_left', 'value' => 'left center'],
['label' => $l . 'bg_position.option.centered', 'value' => 'center center'],
['label' => $l . 'bg_position.option.center_right', 'value' => 'right center'],
['label' => $l . 'bg_position.option.bottom_left', 'value' => 'left bottom'],
['label' => $l . 'bg_position.option.bottom_center', 'value' => 'center bottom'],
['label' => $l . 'bg_position.option.bottom_right', 'value' => 'right bottom'],
],
'default' => 'center center',
],
],
]);
// One palette, so size and position sit on a single row under the image.
$GLOBALS['TCA']['tt_content']['palettes']['vitec_background'] = [
'showitem' => 'tx_vitec_bg_image, --linebreak--, tx_vitec_bg_size, tx_vitec_bg_size_percent, tx_vitec_bg_position',
];
// -------------------------------------------------------------------------
// Shared parent-level setting: column gap scale (1–5) for the whole grid.
// Concerns the container itself (not a single column); maps to a spacing

6
packages/vitec/Configuration/TypoScript/Headless/vitec_containers.typoscript
View File

@@ -125,6 +125,12 @@ tt_content.vitec_container.fields.cssClass.data = flexform:pi_flexform:settings.
tt_content.vitec_container.fields.cssClass.stdWrap.ifEmpty.cObject = TEXT
tt_content.vitec_container.fields.cssClass.stdWrap.ifEmpty.cObject.value =
# Optional background image with its two CSS settings. The renderer returns an
# empty string when no image is set, so the `background` key stays out of the
# payload entirely rather than appearing with a null image.
tt_content.vitec_container.fields.background = USER
tt_content.vitec_container.fields.background.userFunc = Evomedien\Vitec\UserFunc\ContainerBackgroundRenderer->render
# -----------------------------------------------------------------------------
# VITEC · Cards Carousel — container whose children (typically vitec_card
# elements) become the slides. Inherits the grid-container JSON structure