Mit dem LottieFiles-Player können LottieFiles (.json) eingebunden und abgespielt werden. Lottie ist ein vektorbasiertes Grafikformat für Animationen, welches auf SVG und JSON basiert. Es wurde von Airbnb entwickelt, um das Einfügen von Animationen auf Webseiten zu erleichtern.
bh
Element zur Wiedergabe von LottieFiles
HTML-Template: el-lottiefiles-player.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="el-lottiefiles-player-container">
<bh:get.file uid="{cObj.allSettings.lottieFile}" as="file">
<bh:lottie.player
style="{f:if(condition: '{cObj.allSettings.height}', then: 'height: {cObj.allSettings.height}')}"
file="{file}" settings="{cObj.allSettings.lottieSettings}" />
</bh:get.file>
</div>
</bh:tmpl.element>
Typoscript: el-lottiefiles-player.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements.el-lottiefiles-player < abstract.bhElement
plugin.tx_bh.settings.contentElements.el-lottiefiles-player {
name = LottieFiles Player
description = LottieFiles abspielen
templateFile = el-lottiefiles-player.html
templatePath = EXT:bh/Resources/Public/Elements/el-lottiefiles-player/
settingsForm = EXT:bh/Resources/Public/Elements/el-lottiefiles-player/el-lottiefiles-player-settings.html
iconFile = EXT:bh/Resources/Public/Icons/Elemente/youtube.svg
bheListgroup = 1
link = 0
hidden = 1
doNotRenderLink = 1
options {
oncreate = advanced
edit = 0
}
lottieSettings{
loop = 1
autoplay = 1
speed = 1
}
settingsGlobalFields {
templatePath = fileadmin/templates/elements/el-settings-global-fields.html
}
userClass = bh-centered
}
Settings-HTML: el-lottiefiles-player-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<bh:form.settings.tabs>
<bh:form.settings.tab name=".json Datei" icon="page">
<div class="bhe-formsettings-option">
<label data-tooltip="Wähle ein Lottiefile im .Json-Format aus." data-tooltip-view="extended">LottieFile
Auswahl</label>
<bhif-widget-mediacake mime-types="application/json,text/plain"
name="tx_bh_page[data][content][settings][lottieFile]" value="{cObj.allSettings.lottieFile}">
</bhif-widget-mediacake>
</div>
</bh:form.settings.tab>
<bh:form.settings.tab name="Lottie Player" icon="video">
<bh:lottie.settings name="lottieSettings"></bh:lottie.settings>
<div class="bhe-formsettings-option">
<label>Höhe (px, %, vh)</label>
<f:form.textfield name="height" value="{cObj.allSettings.height}" />
</div>
</bh:form.settings.tab>
<bh:form.settings.tab name="Layout" icon="quicklook">
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
</bh:form.settings.tab>
</bh:form.settings.tabs>
<f:form.submit value="Speichern" />
</bh:form.settingsform>