Fieldwizard für verbesserte Medienpreview
Das TCA steuert Verhalten und Ausgabe von Inhalten im TYPO3 Backend. Der sehr flexible Aufbau ermöglicht es, die Funktionalitäten zu steuern und zu erweitern. Dieser Artikel zeigt, wie man eine große Vorschau von Bildern realisieren kann.
Anforderungen
Benutzer:innen füllen ein mehrstufiges Antragsformular aus in dem auch Bilddateien angegeben werden müssen. In einem Backendmodul prüfen Redakteur:innen die Anträge und benötigen eine schnelle Möglichkeit, die angegebenen Bilder zu prüfen.
Um die Datenstruktur zu vereinfachen, wird beim Antrag nur eine Relation zur Tabelle sys_file angelegt und nicht zu sys_file_reference.
Ein neuer Wizard muss in der ext_localconf.php regstriert werden.
$GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']['nodeRegistry'][1646655684] = [
'nodeName' => 'SysFileThumbnails',
'priority' => 70,
'class' => \StudioMitte\Theme\Backend\Form\FieldWizard\ThumbnailsWizard::class
];
Der Wizard selbst ist sehr schlicht gehalten. Das ImageService gibt eine File-Objekt zurück das verkleinert auf eine maximale Breite von 800 Pixeln ausgegeben wird.
<?php
declare(strict_types=1);
namespace StudioMitte\Theme\Backend\Form\FieldWizard;
use TYPO3\CMS\Backend\Form\AbstractNode;
use TYPO3\CMS\Core\Resource\File;
use TYPO3\CMS\Core\Resource\ProcessedFile;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Extbase\Service\ImageService;
/**
* Render big thumbnail of sys_file relation
*/
class ThumbnailsWizard extends AbstractNode
{
public function render(): array
{
$result = $this->initializeResultArray();
$fileId = $this->data['databaseRow'][$this->data['fieldName']][0]['uid'] ?? 0;
if (!$fileId) {
return $result;
}
$imageService = GeneralUtility::makeInstance(ImageService::class);
/** @var File $image */
$image = $imageService->getImage((string)$fileId, null, false);
$processingInstructions = [
'width' => 800,
];
$processedFile = $image->process(ProcessedFile::CONTEXT_IMAGECROPSCALEMASK, $processingInstructions);
$imageUri = $processedFile->getPublicUrl(true);
if ($imageUri) {
$result['html'] = '<img class="img-responsive" src="' . htmlspecialchars($imageUri) . '" />';
}
return $result;
}
}
Als letzte Änderung muss dieser Wizard nun bei den Feldern aktiviert werden bei denen er benötigt wird.
'picture' => [
'label' => 'Picture',
'config' => [
'type' => 'group',
'internal_type' => 'db',
'size' => 1,
'eval' => 'int',
'maxitems' => 1,
'allowed' => 'sys_file',
'hideSuggest' => true,
'fieldWizard' => [
'SysFileThumbnails' => [
'renderType' => 'SysFileThumbnails',
'after' => ['localizationStateSelector'],
'disabled' => false,
],
],
]
],
Das Ergebnis sind große Vorschauen im Backend.
