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 = typo3conf/ext/bh/Resources/Public/Elements/el-lottiefiles-player/
settingsForm = EXT:bh/Resources/Public/Elements/el-lottiefiles-player/el-lottiefiles-player-settings.html
iconFile = typo3conf/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}">
<div class="bhe-tab-box">
<div class="bhe-tab-toggler-box bhe-tab-toggler-style-icon-text">
<div class="bhe-tab-toggler bhe-tab-active">
<div class="bhe-tab-toggler-icon bhe-font-page"></div>
<div class="bhe-tab-toggler-text">.json Datei</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-video"></div>
<div class="bhe-tab-toggler-text">Lottie Player</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-quicklook"></div>
<div class="bhe-tab-toggler-text">Layout</div>
</div>
</div>
<div class="bhe-tab-content-box">
<div class="bhe-tab-content bhe-tab-content-padding bhe-tab-active">
<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>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<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>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
</div>
</div>
</div>
<f:form.submit value="Speichern" />
</bh:form.settingsform>