Typo3: Poster (Vorschaubild) bei Videos einfügen
Zunächst muss man die FluidStyledContent Partials in der eigenen Template Extension überschreiben. Hierzu füge ich folgende Zeilen ins TypoScript Setup meiner Extension ein:
lib.contentElement {
partialRootPaths {
20 = EXT:template_extension/Resources/ext/fluid_styled_content/Private/Partials/
}
}Dann muss die Datei "Video.html" im Ordner typo3conf/ext/template_extension/Resources/ext/fluid_styled_content/Private/Partials/Media/Rendering angelegt werden.
Hierzu habe ich mir zunächst die Quelldatei typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Video.html kopiert und entsprechend angepasst:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<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: '{v:format.replace(substring:file.originalFile.properties.extension,content:file.originalFile.identifier,replacement:\'jpg\') -> v:format.prepend(add: file.originalFile.storage.configuration.basePath)}'}"
/>
</html>Zu Beachten ist, dass ich hier die Extension fluidtypo3/vhs installiert habe und daher auch diese ViewHelper verwende. Wer lieber einen eigenen ViewHelper schreibt kann dies natürlich auch tun.
Was ich nun in meiner Anpassung mache ist, dass ich das Poster-Attribut auf den selben Pfad und Dateinamen wie das Video setze, lediglich die Dateiendung passe ich auf ".jpg" an:
additionalAttributes="{poster: '{v:format.replace(substring:file.originalFile.properties.extension,content:file.originalFile.identifier,replacement:\'jpg\') -> v:format.prepend(add: file.originalFile.storage.configuration.basePath)}'}"Dann lege ich entsprechnd die Datei "Video.jpg" in den Ordner wo auch "Video.mp4" liegt. Wichtig ist, dass der Dateiname exakt gleich ist und die Dateiendung des Bildes ".jpg" ist. Die Dateiendung des Videos ist egal, diese wird ausgelesen und mit "jpg" ersetzt.
Bemerkungen :
Wenig Code und einfach effizient. :)
Danke fürs Teilen.