Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.
bh_newsletter
Inhaltsbox-Element mit Bild, Text und Verlinkung für den Newsletter
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>