Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.
bh_newsletter
Trenner-Element für den Newsletter
HTML-Template: nl-trenner.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace nl=TYPO3\BhNewsletter\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<f:variable name="height" value="{cObj.settings.height}" />
<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-trenner-section">
<nl:cols.row class="nl-trenner-row">
<nl:cols.col width="{cObj.allSettings.width}" padding="0px" class="nl-trenner-col">
<table style="width: 100%;border-spacing:0px;" width="100%" border="0" cellpadding="0" cellspacing="0">
<f:if condition="{cObj.allSettings.style.line} == 'no-line'">
<f:then>
<tr>
<td height="{height}" style="max-height:{height}px;height:{height}px;line-height:{height}px;"> </td>
</tr>
</f:then>
<f:else if="{cObj.allSettings.style.line} == 'ver-line'">
<tr>
<td class="nl-trenner-border-vertical" height="{height}" style="width:50%;max-height:{height}px;height:{height}px;line-height:{height}px;border-right:{cObj.allSettings.border-width-vertical} solid #{cObj.allSettings.style.linecolor};"> </td>
<td height="{height}" style="width:50%;max-height:{height}px;height:{height}px;line-height:{height}px;"> </td>
</tr>
</f:else>
<f:else if="{cObj.allSettings.style.line} == 'img'">
<f:if condition="{height} < {cObj.allSettings.trenner-img-height}">
<f:then>
<f:variable name="img-trenner-height">{cObj.allSettings.trenner-img-height}</f:variable>
</f:then>
<f:else>
<f:variable name="img-trenner-height">{height}</f:variable>
</f:else>
</f:if>
<tr>
<td class="nl-trenner-img-wrapper" height="{img-trenner-height}" align="center" valign="middle" style="vertical-align:center;max-height:{img-trenner-height}px;height:{img-trenner-height}px;line-height:{img-trenner-height}px;border:none;">
<f:if condition="{cObj.allSettings.trenner-img-src} != ''">
<img class="nl-trenner-img" src="{cObj.allSettings.trenner-img-src}" height="auto" width="{cObj.allSettings.trenner-img-width}" style="width:{cObj.allSettings.trenner-img-width}{cObj.allSettings.trenner-img-width-unit}" />
</f:if>
</td>
</tr>
</f:else>
<f:else>
<tr>
<td class="nl-trenner-border-horizontal" height="{height / 2}" style="max-height:{height / 2}px;height:{height / 2}px;line-height:{height / 2}px;border-bottom:{cObj.allSettings.border-width-horizontal} solid #{cObj.allSettings.style.linecolor};"> </td>
</tr>
<tr>
<td height="{height / 2}" style="max-height:{height / 2}px;height:{height / 2}px;line-height:{height / 2}px;"> </td>
</tr>
</f:else>
</f:if>
</table>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
Typoscript: nl-trenner.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements {
nl-trenner < abstract.bhElement
nl-trenner {
name = Trenner
hidden = 0
bheListgroup = 10
bheSorting = 70
options.oncreate = advanced
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/spacer.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-trenner/nl-trenner-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-trenner/
templateFile = nl-trenner.html
styleOptions >
styleOptions.color < element.options.nlbgcolor
styleOptions.paddingV < element.options.paddingV
styleOptions.line{
hor-line = horizontale Linie
ver-line = vertikale Linie
no-line = keine Linie
img = mit Bild
}
styleOptions.linecolor {
FFFFFF = weiß
262626 = schwarz
}
border-width-vertical = 2px
border-width-horizontal = 1px
trenner-img-src =
trenner-img-width = 0
trenner-img-width-unit = px
paddingVTop = 0px
paddingVBottom = 0px
height = 40
width = 600
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
## Mediaqueries
element.options.mediaqueries.mobile.nl-trenner = nl-trenner-mediaqueries-mobile
Settings-HTML: nl-trenner-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-formsettings-option">
<label>Trenner-Linie</label>
<f:form.select name="style[line]" value="{cObj.allSettings.style.line}"
options="{cObj.allSettings.styleOptions.line}" />
</div>
<div class="bhe-formsettings-option">
<label>Farbe Linie</label>
<f:form.select name="style[linecolor]" value="{cObj.allSettings.style.linecolor}"
options="{cObj.allSettings.styleOptions.linecolor}" />
</div>
<div class="bhe-formsettings-option">
<label>Höhe in Pixel</label>
<f:form.textfield name="height" type="number" value="{cObj.settings.height}" />
</div>
<f:comment>
<div class="bhe-formsettings-option">
<label>Breite in Pixel</label>
<f:form.textfield type="number" name="width" value="{cObj.allSettings.width}" />
</div>
</f:comment>
<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" />
</bh:form.settingsform>