Lottie-Player  

    bh
    Element zur Wiedergabe von LottieFiles

    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.

    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" 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>