Add BG offset

This commit is contained in:
orasche committed 2026-08-14 10:59:22 +02:00
1 parent c720696781
commit 58990ebe8d
6 files changed
+161 -5

No files matched your search

@@ -91,6 +91,8 @@ use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
],
'tx_vitec_bg_position' => [
'label' => $l . 'bg_position.label',
// Same reason as on bg_size: reveal the custom fields immediately.
'onChange' => 'reload',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
@@ -104,15 +106,43 @@ use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
['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'],
['label' => $l . 'bg_position.option.custom', 'value' => 'custom'],
],
'default' => 'center center',
],
],
]);
// Custom position: four edge offsets in percent, shown only when the select
// is on "custom". `nullable` matters here - an empty field has to stay
// distinguishable from an explicit 0, which is a valid offset (flush against
// that edge). Empty means "centred on this axis".
//
// CSS cannot take a top AND a bottom offset at once, so these four are not
// written out literally; ContainerBackgroundRenderer folds them into the
// percentage form, where "10% from the right" is simply 90%.
$positionOffsets = [];
foreach (['top', 'bottom', 'left', 'right'] as $edge) {
$positionOffsets['tx_vitec_bg_pos_' . $edge] = [
'label' => $l . 'bg_pos.' . $edge,
'displayCond' => 'FIELD:tx_vitec_bg_position:=:custom',
'config' => [
'type' => 'number',
'size' => 5,
'nullable' => true,
'range' => [
'lower' => 0,
'upper' => 100,
],
],
];
}
ExtensionManagementUtility::addTCAcolumns('tt_content', $positionOffsets);
// 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',
'showitem' => 'tx_vitec_bg_image, --linebreak--, tx_vitec_bg_size, tx_vitec_bg_size_percent, tx_vitec_bg_position,'
. ' --linebreak--, tx_vitec_bg_pos_top, tx_vitec_bg_pos_bottom, tx_vitec_bg_pos_left, tx_vitec_bg_pos_right',
];
// -------------------------------------------------------------------------