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"> <f:if condition="{cObj.allSettings.bestate} == '1'"> <style> .nl-picture-image-backend.image { cObj.uid } .bhBackgroundImage { height: { cObj.settings.imgheight } px; background-size: cover; background-position: center center; } </style> <div class="nl-picture-image-backend image{cObj.uid}" style="display: none;"> <bh:property.backgroundImage picture="{cObj.picture}" property="picture"> </bh:property.backgroundImage> </div> </f:if> <f:if condition="{cObj.picture.file}"> <!--[if mso | IE]> <bh:link link="{cObj.link}" class="nl-picture-link" style="width:{cObj.allSettings.imgwidth}px;height:auto;display:block;margin:0;padding:0;"><img src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth}', height:'{cObj.allSettings.imgheight}c')}" width="100%" class="width-{cObj.allSettings.width}" alt="{cObj.picture.seo}"></bh:link> <![endif]--> <!--[if !mso]><!--> <bh:link link="{cObj.link}" class="nl-picture-link" style="width:100%;height:auto;display:block;margin:0;padding:0;"><img src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth * 2}', height:'{cObj.allSettings.imgheight * 2}c')}" width="100%" class="width-{cObj.allSettings.width}" alt="{cObj.picture.seo}"></bh:link> <!--<![endif]--> </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
    Settings-HTML: nl-picture-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:form.settingsform content="{cObj}"> <div class="bhe-formsettings-option"> <label>Höhe in Pixel</label> <f:form.textfield name="imgheight" type="number" value="{cObj.settings.imgheight}" /> </div> <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 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>