Social-Wall  

    bh_social
    Einbindung der Newsfeeds von Facebook und Instagram

    HTML-Aufbau und CSS-Klassen

    Die Social-Wall wird immer dann befüllt, wenn HTML mit folgendem Aufbau gefunden wird:

    HTML
    <a class="bh-social-post bh-social-template bh-social-link bh-social-background-picture" target="_blank"> <div class="bh-social-content"> <div class="bh-social-datewrapper"> <span class="bh-social-weekday"></span> <span class="bh-social-day"></span>. <span class="bh-social-month"></span>. <span class="bh-social-year"></span> </div> <div class="bh-social-message"></div> </div> </a>

    Element-Einstellungen

    Im Element-TypoScript kann mit der settingsFormConfig.advanced-Einstellung bestimmt werden, ob die optischen Einstellungen angezeigt werden (1) oder nicht (0).

    Weitere Infos zum Element, seine Darstellungsoptionen, die JavaScript-Konfiguration, sowie seine Klassen und Events findest du hier.

    HTML-Template: el-social.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:tmpl.element object="{cObj}"> <div class="bh-social-widget {cObj.allSettings.styleSelected}" data-facebook="{cObj.allSettings.facebookId}" data-instagram="{cObj.allSettings.instagramId}" data-limit="{cObj.allSettings.limit}" data-maxTextLength="{cObj.allSettings.maxTextLength}" data-swiper='{bh:format.json(value: cObj.allSettings.swiper, convertPluginSettings: 1 )}'> <f:switch expression="{cObj.allSettings.styleSelected}"> <f:case value="bh-social-rows2"> <a class="bh-social-post bh-social-template bh-social-link" target="_blank"> <div class="bh-social-background-picture"></div> <div class="bh-social-content"> <div class="bh-social-content-inner"> <div class="bh-social-datewrapper"> <span class="bh-social-weekday"></span> <span class="bh-social-day"></span>.<span class="bh-social-month"></span>.<span class="bh-social-year"></span> </div> <div class="bh-social-message"></div> </div> </div> </a> </f:case> <f:case value="bh-social-default2"> <a class="bh-social-post bh-social-template bh-social-link" target="_blank"> <div class="bh-social-background-picture"></div> <div class="bh-social-content"> <div class="bh-social-content-inner"> <div class="bh-social-datewrapper"> <span class="bh-social-weekday"></span> <span class="bh-social-day"></span>.<span class="bh-social-month"></span>.<span class="bh-social-year"></span> </div> <div class="bh-social-message"></div> </div> </div> </a> </f:case> <f:defaultCase> <a class="bh-social-post bh-social-template bh-social-link bh-social-background-picture" target="_blank"> <div class="bh-social-content"> <div class="bh-social-datewrapper"> <span class="bh-social-weekday"></span> <span class="bh-social-day"></span>.<span class="bh-social-month"></span>.<span class="bh-social-year"></span> </div> <div class="bh-social-message"></div> </div> </a> </f:defaultCase> </f:switch> </div> </bh:tmpl.element>
    Settings-HTML: el-social-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} {namespace weather=TYPO3\BhWeather\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-form"></div> <div class="bhe-tab-toggler-text">Social</div> </div> <div class="bhe-tab-toggler"> <div class="bhe-tab-toggler-icon bhe-font-form"></div> <div class="bhe-tab-toggler-text">Settings</div> </div> <f:if condition="{cObj.allSettings.settingsFormConfig.advanced}"> <div class="bhe-tab-toggler"> <div class="bhe-tab-toggler-icon bhe-font-fader"></div> <div class="bhe-tab-toggler-text">Swiper</div> </div> </f:if> </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>Facebook Page-ID</label> <f:form.textfield name="facebookId" value="{cObj.allSettings.facebookId}" /> </div> <div class="bhe-formsettings-option"> <label>Instagram-Username (Account muss ein Business-Account sein)</label> <f:form.textfield name="instagramId" value="{cObj.allSettings.instagramId}" /> </div> <div class="bhe-formsettings-option"> <label>Anzahl (1-25)</label> <f:form.textfield type="number" name="limit" value="{cObj.allSettings.limit}" additionalAttributes="{min: '1'}" /> </div> <f:if condition="{cObj.allSettings.settingsFormConfig.advanced}"> <div class="bhe-formsettings-option"> <label>Maximale Textlänge (in Zeichen)</label> <f:form.textfield name="maxTextLength" value="{cObj.allSettings.maxTextLength}" /> </div> </f:if> </div> <div class="bhe-tab-content bhe-tab-content-padding"> <f:if condition="{cObj.allSettings.settingsFormConfig.advanced}"> <div class="bhe-formsettings-option"> <label>Darstellung</label> <f:form.select name="styleSelected" value="{cObj.allSettings.styleSelected}" options="{cObj.allSettings.styles}" /> </div> </f:if> <f:if condition="{cObj.allSettings.styleOptions.classes}"> <div class="bhe-formsettings-option"> <label>Styles</label> <f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" /> </div> </f:if> <bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" /> </div> <f:if condition="{cObj.allSettings.settingsFormConfig.advanced}"> <div class="bhe-tab-content bhe-tab-content-padding"> <div class="bhe-formsettings-option"> <label>Swiper verwenden</label> <f:form.checkbox name="swiper[enable]" value="1" checked="{cObj.allSettings.swiper.enable}" /> </div> <div class="bhe-formsettings-option"> <label>Effekt</label> <f:form.select name="swiper[effect]" value="{cObj.allSettings.swiper.effect}" options="{slide:'Slide',fade:'Fade'}" /> </div> <div class="bhe-formsettings-option"> <label>Navigation - Pfeile</label> <f:form.checkbox name="swiper[navigation]" value="1" checked="{cObj.allSettings.swiper.navigation}" /> </div> <div class="bhe-formsettings-option"> <label>Navigation - Punkte</label> <f:form.checkbox name="swiper[pagination]" value="1" checked="{cObj.allSettings.swiper.pagination}" /> </div> <f:comment> <!-- TODO - Mindesthöhe berücksichtigen --> <div class="bhe-formsettings-option"> <label data-tooltip="wenn leer wird keine Mindesthöhe verwendet" data-tooltip-view="extended">Mindesthöhe (px,%,vh)</label> <f:form.textfield name="swiper[min-height]" value="{cObj.allSettings.swiper.min-height}" /> </div> </f:comment> <div class="bhe-formsettings-option"> <label data-tooltip="wenn leer wird als Default-Wert 0px verwendet" data-tooltip-view="extended">Platz zwischen den Spalten (px)</label> <f:form.textfield name="swiper[spaceBetween]" value="{cObj.allSettings.swiper.spaceBetween}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="<b>- '2' ganzzahlige Werte</b><br/>gibt die Spaltenanzahl an<br/><b>- '300px' Werte mit dem Zusatz 'px'</b><br/> gibt die Mindestbreite an (automatische Berechnung)<br/><b>- 'auto'</b><br/> Breite wird über CSS definiert (für Profis)" data-tooltip-view="extended">Spalten Einstellung</label> <f:form.textfield name="swiper[slideMinWidth]" value="{cObj.allSettings.swiper.slideMinWidth}" /> </div> <div class="bhe-formsettings-option"> <label>Spalten zentriert</label> <f:form.checkbox name="swiper[centeredSlides]" value="1" checked="{cObj.allSettings.swiper.centeredSlides}" /> </div> <div class="bhe-formsettings-option"> <label>Loop</label> <f:form.checkbox name="swiper[loop]" value="1" checked="{cObj.allSettings.swiper.loop}" /> </div> <div class="bhe-formsettings-option"> <label>Autoplay</label> <f:form.checkbox name="swiper[autoplay]" value="1" checked="{cObj.allSettings.swiper.autoplay}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip-view="extended">Autoplay Dauer in Sekunden</label> <input type="number" step="0.01" name="tx_bh_page[data][content][settings][swiper][autoplayOptions][delay]" min="0" value="{cObj.allSettings.swiper.autoplayOptions.delay}" /> </div> </div> </f:if> </div> </div> <f:form.submit value="Speichern" /> </bh:form.settingsform>