Bild  

    bh_newsletter
    Bild-Element für den Newsletter

    Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.

    HTML-Template: nl-picture.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} {namespace nl=TYPO3\BhNewsletter\ViewHelpers} <bh:tmpl.element object="{cObj}"> <f:if condition="{cObj.allSettings.style.color} == 'transparent'"> <f:then> <f:variable name="color" value="" /> </f:then> <f:else> <f:variable name="color" value="#" /> </f:else> </f:if> <nl:section full-width="true" background-color="{color}{cObj.allSettings.style.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="nl-picture-section"> <nl:cols.row width="{cObj.allSettings.width}" class="nl-picture-row"> <nl:cols.col width="{cObj.allSettings.width}" padding="0px" class="nl-picture-col"> <nl:picture picture="{cObj.picture}" property="picture" /> <f:if condition="{cObj.allSettings.copyright} && {cObj.picture.copyright}"> <div class="nl-picture-copyright-wrapper"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> <tbody> <tr> <td class="nl-picture-copyright-padding" align="left"> <p class="nl-picture-copyright">© {cObj.picture.copyright}</p> </td> </tr> </tbody> </table> </div> </f:if> </nl:cols.col> </nl:cols.row> </nl:section> </bh:tmpl.element>
    Typoscript: nl-picture.typoscript
    TYPOSCRIPT
    plugin.tx_bh.settings.contentElements { nl-picture < abstract.bhElement nl-picture { name = Bild hidden = 0 bheListgroup = 10 bheSorting = 20 description = Bild-Element iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/picture.svg settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/nl-picture-settings.html templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/ templateFile = nl-picture.html allowedData.file = image link = 1 options.oncreate = advanced styleOptions > styleOptions.color < element.options.nlbgcolor styleOptions.width < element.options.width styleOptions.paddingV < element.options.paddingV styleOptions.width { width-200 = mini (200px) width-100 = logo (100px) } width = 600 max-width = 600 maxWidth = 600 height = 350 imgheight = 350 imgwidth = 600 padding = 0 paddingVTop = 30px paddingVBottom = 30px bestate < element.options.backendstate enablePaddingV = 1 settingsGlobalFields { templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html } } } ## Mediaqueries element.options.mediaqueries.mobile.nl-picture = nl-picture-mediaqueries-mobile ## CSS page.includeCSS { nl-picture = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/nl-picture.css nl-picture.forceOnTop = 1 }
    Settings-HTML: nl-picture-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:form.settingsform content="{cObj}"> <div class="bhe-formsettings-option bhe-setting-width"> <label>Breite des Elements</label> <f:form.select name="style[width]" value="{cObj.allSettings.style.width}" options="{cObj.allSettings.styleOptions.width}" /> </div> <div class="bhe-formsettings-option bhe-element-width" style="display:none;"> <label>Breite des Elements</label> <f:form.textfield type="number" name="width" value="{cObj.allSettings.width}" /> </div> <div class="bhe-formsettings-option"> <label>Bild-Copyright ausgeben</label> <f:form.checkbox name="copyright" value="copyright" checked="{cObj.allSettings.copyright}"/> </div> <div class="bhe-formsettings-option bhe-img-width" style="display:none;"> <label>Breite des Bildes</label> <f:form.textfield type="number" name="imgwidth" value="{cObj.allSettings.imgwidth}" /> </div> <div class="bhe-formsettings-option"> <label>Hintergrundfarbe</label> <f:form.select name="style[color]" value="{cObj.allSettings.style.color}" options="{cObj.allSettings.styleOptions.color}" /> </div> <bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" /> <f:form.submit value="Speichern" /> <script type="text/javascript"> Bh.newsletter.coreElements.initSettingsWidth(); </script> </bh:form.settingsform>