Inhaltsbox  

    bh_newsletter
    Inhaltsbox-Element mit Bild, Text und Verlinkung für den Newsletter

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

    HTML-Template: nl-box.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} {namespace nl=TYPO3\BhNewsletter\ViewHelpers} <bh:tmpl.element object="{cObj}"> <f:if condition="{cObj.allSettings.color} == 'transparent'"> <f:then> <f:variable name="color" value="" /> </f:then> <f:else> <f:variable name="color" value="#" /> </f:else> </f:if> <f:if condition="{cObj.allSettings.style.boxColor} == 'transparent'"> <f:then> <f:variable name="color-content" value="" /> </f:then> <f:else> <f:variable name="color-content" value="#" /> </f:else> </f:if> <f:if condition="{cObj.allSettings.setResponsiveImages} == 1"> <f:then> <f:variable name="responsiveImages">{cObj.allSettings.responsiveImagesSettings}</f:variable> <f:if condition="{cObj.allSettings.responsiveImagesSettings} == 1"> <f:variable name="responsiveImagesClass" value="boxWithResponsiveImages" /> </f:if> </f:then> <f:else> <f:variable name="responsiveImages">{cObj.allSettings.responsiveImages}</f:variable> <f:if condition="{cObj.allSettings.responsiveImages} == 1"> <f:variable name="responsiveImagesClass" value="boxWithResponsiveImages" /> </f:if> </f:else> </f:if> <f:switch expression="{cObj.allSettings.style.boxStyle}"> <f:case value="boxBigLeft"> <nl:section full-width="true" background-color="{color}{cObj.allSettings.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="bigBox boxcolor-{cObj.allSettings.style.boxColor} {responsiveImagesClass}"> <nl:cols.row width="{cObj.allSettings.width}" class="nl-box-row bigBox-row"> <nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColPicture"> <f:if condition="{cObj.allSettings.bestate} == '1'"> <style> .nl-picture-image-backend.image { cObj.uid } .bhBackgroundImage { height: { cObj.settings.heightImg } 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.allSettings.bestate} == '1' && {responsiveImages} == 1"> <div class="nl-box-img-responsive-switch js-img-responsive-switch"> <div class="nl-box-img-responsive-switch-icon-wrapper"> <div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-desktop"> <div class="nl-box-img-responsive-switch-icon-icon bh-font-monitor"></div> </div> <div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-mobile"> <div class="nl-box-img-responsive-switch-icon-icon bh-font-smartphone"></div> </div> </div> </div> </f:if> <f:if condition="{cObj.picture.file}"> <f:if condition="{responsiveImages} == 1"> <f:then> <!--[if mso | IE]> <img class="img-for-desktop" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}"> <![endif]--> <!--[if !mso]><!--> <img class="img-for-desktop" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}"> <img class="img-for-mobile" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width * 2}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}"> <!--<![endif]--> </f:then> <f:else> <!--[if mso | IE]> <img class="img-for-desktop" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}"> <![endif]--> <!--[if !mso]><!--> <img class="img-for-both" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}"> <!--<![endif]--> </f:else> </f:if> </f:if> </nl:cols.col> <nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColText"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxContentWrapper" height="{cObj.settings.heightImg}"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxHeadline"> <bh:property.text tag="div" rte="false" property="name" /> </td> </tr> </tbody> </table> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxText"> <bh:property.text tag="div" property="text" /> </td> </tr> </tbody> </table> <f:if condition="{cObj.link}"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxButtonWrapper"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr class="mobilePaddingLR"> <td width="100%" valign="middle" align="center" class="buttonBG"> <bh:link link="{cObj.link}" class="buttonLink"> <bh:property.text tag="span" rte="false" property="subtext" /> </bh:link> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </f:if> </td> </tr> </tbody> </table> </nl:cols.col> </nl:cols.row> </nl:section> </f:case> <f:case value="boxBigRight"> <nl:section full-width="true" background-color="{color}{cObj.allSettings.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="bigBox boxcolor-{cObj.allSettings.style.boxColor} {responsiveImagesClass}"> <nl:cols.row width="{cObj.allSettings.width}" class="nl-box-row bigBox-row"> <nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColText"> <f:if condition="{cObj.picture.file} && {responsiveImages} == 1 && {cObj.allSettings.bestate} != '1'"> <!--[if !mso]><!--> <img class="img-for-mobile" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width * 2}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}"> <!--<![endif]--> </f:if> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxContentWrapper" height="{cObj.settings.heightImg}"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxHeadline"> <bh:property.text tag="div" rte="false" property="name" /> </td> </tr> </tbody> </table> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxText"> <bh:property.text tag="div" property="text" /> </td> </tr> </tbody> </table> <f:if condition="{cObj.link}"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxButtonWrapper"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr class="mobilePaddingLR"> <td width="100%" valign="middle" align="center" class="buttonBG"> <bh:link link="{cObj.link}" class="buttonLink"> <bh:property.text tag="span" rte="false" property="subtext" /> </bh:link> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </f:if> </td> </tr> </tbody> </table> </nl:cols.col> <nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.color}" padding="0px" class="boxColPicture"> <f:if condition="{cObj.allSettings.bestate} == '1'"> <style> .nl-picture-image-backend.image { cObj.uid } .bhBackgroundImage { height: { cObj.settings.heightImg } 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.allSettings.bestate} == '1' && {responsiveImages} == 1"> <div class="nl-box-img-responsive-switch"> <div class="nl-box-img-responsive-switch-icon-wrapper"> <div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-desktop"> <div class="nl-box-img-responsive-switch-icon-icon bh-font-monitor"></div> </div> <div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-mobile"> <div class="nl-box-img-responsive-switch-icon-icon bh-font-smartphone"></div> </div> </div> </div> </f:if> <f:if condition="{cObj.picture.file}"> <f:if condition="{responsiveImages} == 1"> <f:then> <!--[if mso | IE]> <img class="img-for-desktop" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}"> <![endif]--> <!--[if !mso]><!--> <img class="img-for-desktop" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}"> <f:if condition="{cObj.allSettings.bestate} == '1'"> <img class="img-for-mobile" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width * 2}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}"> </f:if> <!--<![endif]--> </f:then> <f:else> <!--[if mso | IE]> <img class="img-for-desktop" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}"> <![endif]--> <!--[if !mso]><!--> <img class="img-for-both" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}"> <!--<![endif]--> </f:else> </f:if> </f:if> </nl:cols.col> </nl:cols.row> </nl:section> </f:case> <f:case value="boxSmall"> <nl:section width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="smallBox boxcolor-{cObj.allSettings.style.boxColor}"> <f:if condition="{cObj.allSettings.bestate} == '1'"> <style> .nl-picture-image-backend.image { cObj.uid } .bhBackgroundImage { height: { cObj.allSettings.smallBoxImgHeight } px; background-size: cover; background-position: center center; min-height: 100px; } </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]> <img class="img-for-desktop" src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth}', height:'{cObj.allSettings.smallBoxImgHeight}c')}" width="100%" alt="{cObj.picture.seo}"> <![endif]--> <!--[if !mso]><!--> <img src="{f:uri.image(src:'uploads/tx_bh/{cObj.picture.file}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth * 2}', height:'{cObj.allSettings.smallBoxImgHeight * 2}c')}" width="100%" alt="{cObj.picture.seo}"> <!--<![endif]--> </f:if> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxContentWrapper" height="{cObj.settings.heightImg}" style="background-color:{color-content}{cObj.allSettings.style.boxColor};"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxHeadline smallBoxHeadline"> <bh:property.text tag="div" rte="false" property="name" /> </td> </tr> </tbody> </table> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxText"> <bh:property.text tag="div" property="text" /> </td> </tr> </tbody> </table> </td> </tr> <tr valign="top"> <td class="boxButtonContainer" height="auto" style="background-color:{color-content}{cObj.allSettings.style.boxColor};"> <f:if condition="{cObj.link}"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="boxButtonWrapper"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr class="mobilePaddingLR"> <td width="100%" valign="middle" align="center" class="buttonBG"> <bh:link link="{cObj.link}" class="buttonLink"> <bh:property.text tag="span" rte="false" property="subtext" /> </bh:link> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </f:if> </td> </tr> </tbody> </table> </nl:section> </f:case> </f:switch> </bh:tmpl.element>
    Typoscript: nl-box.typoscript
    TYPOSCRIPT
    plugin.tx_bh.settings.contentElements { nl-box < abstract.bhElement nl-box { name = Box hidden = 0 bheListgroup = 10 bheSorting = 50 description = Box-Element iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/box.svg settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-box/nl-box-settings.html templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-box/ templateFile = nl-box.html link = 1 doNotRenderLink = 1 height = 200 heightImg = 200 width = 600 paddingVTop = 30px paddingVBottom = 30px options.oncreate = advanced dummyData{ text = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum mattis sit volutpat purus. subtext = mehr dazu ... name = Headline } styleOptions > styleOptions.color < element.options.nlbgcolor styleOptions.paddingV < element.options.paddingV styleOptions.boxColor{ transparent = ohne Farbe FFFFFF = weiß } styleOptions{ boxStyle{ boxBigLeft = große Box (Bild links) boxBigRight = große Box (Bild rechts) boxSmall = kleine Box (nur im Spalter verwenden) } } bestate < element.options.backendstate responsiveImages < element.options.responsiveImages smallBoxImgHeight = 200 enablePaddingV = 1 settingsGlobalFields { templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html } } } ## Mediaqueries element.options.mediaqueries.mobile.nl-box = nl-box-mediaqueries-mobile ## CSS page.includeCSS { nl-box = EXT:bh_newsletter/Resources/Public/Elements/nl-box/nl-box.css nl-box.forceOnTop = 1 }
    Settings-HTML: nl-box-settings.html
    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <bh:form.settingsform content="{cObj}"> <div class="bhe-formsettings-option"> <label>Aussehen der Inhaltsbox</label> <f:form.select name="style[boxStyle]" value="{cObj.allSettings.style.boxStyle}" options="{cObj.allSettings.styleOptions.boxStyle}" /> </div> <div class="bhe-formsettings-option"> <label>Farbeschema der Box</label> <f:form.select name="style[boxColor]" value="{cObj.allSettings.style.boxColor}" options="{cObj.allSettings.styleOptions.boxColor}" /> </div> <div class="bhe-formsettings-option"> <label>Höhe des Contents in Pixel</label> <f:form.textfield name="heightImg" type="number" value="{cObj.settings.heightImg}" /> </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="color" value="{cObj.allSettings.color}" options="{cObj.allSettings.styleOptions.color}" /> </div> <f:if condition="{cObj.allSettings.setResponsiveImages} == 1"> <div class="bhe-formsettings-option"> <label data-tooltip="Das Bild wird in der Mobilversion in halber Höhe ausgegeben." data-tooltip-view="extended">kleineres Bild in der Mobilversion</label> <f:form.checkbox name="responsiveImagesSettings" value="1" checked="{cObj.allSettings.responsiveImagesSettings}" /> </div> </f:if> <bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" /> <f:form.submit value="Speichern" /> <script type="text/javascript"> Bh.newsletter.coreElements.initBoxSettingsWidth(); </script> </bh:form.settingsform>