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:switch expression="{cObj.allSettings.style.boxCols}"> <f:case value="equal"> <f:variable name="colImg" value="{cObj.allSettings.width / 2}" /> <f:variable name="colContent" value="{cObj.allSettings.width / 2}" /> </f:case> <f:case value="imgSmall"> <f:variable name="colImg" value="{cObj.allSettings.width / 3}" /> <f:variable name="colContent" value="{cObj.allSettings.width / 3 * 2}" /> </f:case> <f:case value="imgBig"> <f:variable name="colImg" value="{cObj.allSettings.width / 3 * 2}" /> <f:variable name="colContent" value="{cObj.allSettings.width / 3}" /> </f:case> <f:defaultCase> <f:variable name="colImg" value="{cObj.allSettings.width / 2}" /> <f:variable name="colContent" value="{cObj.allSettings.width / 2}" /> </f:defaultCase> </f:switch> <f:if condition="{cObj.allSettings.responsiveImages} == 1"> <f:variable name="responsiveImagesClass" value="boxWithResponsiveImages" /> <f:if condition="{cObj.allSettings.heightImgMobile} != 0"> <f:then> <f:variable name="mobileHeight" value="{cObj.allSettings.heightImgMobile}" /> </f:then> <f:else> <f:variable name="mobileHeight" value="{cObj.settings.heightImg / 2}" /> </f:else> </f:if> </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="{colImg}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColPicture"> <f:if condition="{cObj.allSettings.responsiveImages} == 1"> <f:then> <nl:picture picture="{cObj.picture}" property="picture" mode="responsive" width="{colImg}" height="{cObj.settings.heightImg}" width-mobile="{cObj.allSettings.width / 2}" height-mobile="{mobileHeight}" /> </f:then> <f:else> <nl:picture picture="{cObj.picture}" property="picture" width="{colImg}" height="{cObj.settings.heightImg}" /> </f:else> </f:if> </nl:cols.col> <nl:cols.col width="{colContent}" 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="{colContent}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColText"> <f:if condition="{cObj.allSettings.responsiveImages} == 1 && {cObj.allSettings.bestate} != '1'"> <nl:picture picture="{cObj.picture}" property="picture" mode="mobile" width-mobile="{cObj.allSettings.width / 2}" height-mobile="{mobileHeight}" /> </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="{colImg}" background-color="{color-content}{cObj.allSettings.color}" padding="0px" class="boxColPicture"> <f:if condition="{cObj.allSettings.responsiveImages} == 1"> <f:then> <nl:picture picture="{cObj.picture}" property="picture" mode="desktop" width="{colImg}" height="{cObj.settings.heightImg}" width-mobile="{cObj.allSettings.width / 2}" height-mobile="{mobileHeight}" /> <f:if condition="{cObj.allSettings.bestate} == '1'"> <nl:picture picture="{cObj.picture}" property="picture" mode="mobile" width-mobile="{cObj.allSettings.width / 2}" height-mobile="{mobileHeight}" /> </f:if> </f:then> <f:else> <nl:picture picture="{cObj.picture}" property="picture" width="{colImg}" height="{cObj.settings.heightImg}" /> </f:else> </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}"> <nl:picture picture="{cObj.picture}" property="picture" width="{cObj.allSettings.imgwidth}" height="{cObj.allSettings.smallBoxImgHeight}" /> <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 (nicht im Spalter verwenden) boxBigRight = große Box - Bild rechts (nicht im Spalter verwenden) boxSmall = kleine Box (nur im Spalter verwenden) } boxCols{ equal = Bild gleich wie Inhalt imgSmall = kleines Bild imgBig = großes Bild } } bestate < element.options.backendstate responsiveImages < element.options.responsiveImages heightImgMobile = 0 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>Aufteilung der Inhaltsbox</label> <f:form.select name="style[boxCols]" value="{cObj.allSettings.style.boxCols}" options="{cObj.allSettings.styleOptions.boxCols}" /> </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.responsiveImages} == 1"> <div class="bhe-formsettings-option"> <label>Höhe des Bildes in der Mobilversion (in Pixel)</label> <f:form.textfield name="heightImgMobile" type="number" value="{cObj.settings.heightImgMobile}" /> </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>