Vorschaubild für Media-Element/Video
Wer hat die Auswahl eines Vorschaubildes für Videos im Text/Media-Contentelement noch nicht vermisst?
Wir schon einige Male und haben uns deshalb daran gemacht, das Problem zu lösen.
Diese Anleitung bezieht sich auf die TYPO3 Version 10.4. Wir setzen voraus, dass das Anlegen von Extensions bekannt ist und gehen hier nicht weiter darauf ein.
Ein Tutorial über eine minimale Extension gibt es hier:
https://docs.typo3.org/m/typo3/tutorial-sitepackage/master/en-us/Index.html
Ein Download hier:
https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code
1. Das TCA für die Tabelle "sys_file_reference" erweitern und Datenbankfeld anlegen
Für das Erweitern der Tabelle legen wir in unserer Extension im Verzeichnis "myExtKey/Configuration/TCA/Override/ " die Datei sys_file_reference.php an. Darin definieren wir ein neues TCA-Feld für das Einfügen eines FAL-Bildes.
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
'sys_file_reference',
[
'videopreviewimage' => [
'exclude' => 0,
'label' => 'LLL:EXT:vigem/Resources/Private/Language/locallang_db.xlf:sys_file_reference.videopreviewimage',
'displayCond' => 'FIELD:fieldname:=:assets',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'videopreviewimage',
[
'appearance' => [
'headerThumbnail' => [
'width' => '100',
'height' => '100c',
],
'collapseAll' => TRUE,
'createNewRelationLinkTitle' => 'LLL:EXT:your_extension/Resources/Private/Language/locallang_db.xlf:tx_yourextension_db_table.add-images',
'showPossibleLocalizationRecords' => true,
'showRemovedLocalizationRecords' => true,
'showAllLocalizationLink' => true,
'showSynchronizationLink' => true,
],
'behaviour' => [
'allowLanguageSynchronization' => true,
],
'overrideChildTca' => [
'types' => [
\TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
'showitem' => '
--palette--;LLL:EXT:lang/Resources/Private/Language/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,
--palette--;;filePalette'
],
],
//Link und Bildunterschrift entfernen
'columns' => [
'link' => false,
'description' => false,
'alternative' => false,
'title' => false,
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'disabled' => true,
],
'videopreviewimagecrop' => [
'title' => 'LLL:EXT:vigem/Resources/Private/Language/locallang_db.xlf:sys_file_reference.videopreviewimagecrop',
'allowedAspectRatios' => [
'NaN' => [
'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
'value' => 0.0
],
'603:800' => [
'title' => 'H: 603 : 800',
'value' => 603/800
],
]
],
],
],
],
],
],
'maxitems' => 1,
'minitems' => 0,
],
//Nur bestimmte File-Ext
'jpg,jpeg,png' //$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
)
],
],
1
);Anschließend ordnen wir das Feld einer Palette zu.
//Feld der Video-Palette hinzufügen
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
'sys_file_reference',
'videoOverlayPalette',
'--linebreak--,videopreviewimage,', 'after:autoplay'
);Abschließend muss das neue Feld auch in der Datenbank angelegt werden. Dafür legen wir die Datei "ext_tables.sql" im Wurzelverzeichnis unserer Extension an und geben folgenden Inhalt ein.
#
# Table structure for table 'sys_file_references'
#.
CREATE TABLE sys_file_reference (
videopreviewimage int(11) unsigned DEFAULT '0',
);Über die "Adminwerkzeuge > Wartung" unter "Analyze Database Structure" können die Felder in der Datenbank angelegt werden.
Das Vorschaubild muss in das Partial "../FluidStyledContent/Patial/Media/Rendering/Video.html" eigefügt werden. Am besten kopiert man sich die gesamte Templatestruktur der FluidStyled Contentelemente in die eigene Extensionund und überschreibt die Dateien dann dort, dann bleiben die Änderungen nach Core-Updates erhalten.
<f:comment> -- Erzeugt ein Vorschaubild für das Video -- </f:comment>
<f:if condition="{file.properties.videopreviewimage}">
<f:variable name="poster"><f:cObject typoscriptObjectPath="lib.videoPreviewImage" data="{file.properties}" currentValueKey="pid" /></f:variable>
</f:if>
<f:media
class="video-embed-item"
file="{file}"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"
additionalConfig="{settings.media.additionalConfig}"
additionalAttributes="{poster: poster}"
/>Das Auslesen des Vorschaubildes erfolgt über einen TyposcripObjectPath direkt im Template-Partial. Hierfür legen wir zusätzlich eine Template-Datei "VideoPreviewImage.html" unter "../FluidStyledContent/Templates" an.
######################################################################
### Zusätzliche FileReference Felder für tt_content/textmedia
### -> Video-Vorschaubild erstellen
######################################################################
lib.videoPreviewImage =< lib.contentElement
lib.videoPreviewImage {
### Es wird der Template-Pfad für fluid_styled_content übernommen
templateName = VideoPreviewImage
dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
dataProcessing.10 {
as = images
references.fieldName = uid
references.table = sys_file_reference
}
### Bilder rekusrsiv aus der DB holen
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = videopreviewimage
}
}
}Als Rüchgabewert des TyposcriptObjectPaths erhalten wir über das zugehörige Template den Pfad zum Bild, den wir über die Variable "poster" noch im Media-Element über die "additionalAttributes" einfügen müssen.
<f:comment> -- Wenn es Vorschau-Bilder gibt, dann den Pfad zurückgeben</f:comment>
<f:if condition="{images.0}">
{f:uri.image(image: images.0)}
</f:if>Erstellt: 10.07.2021
Vielen Dank für Ihr Interesse.
Bei Fragen zu TYPO3, Programmierung oder Upgrades stehen wir Ihnen gerne zur Verfügung. -> Kontakt