Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.
bh_newsletter
Text-Element für den Newsletter
HTML-Template: nl-text.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="color-{cObj.allSettings.style.color} nl-text-section">
<nl:cols.row width="{cObj.allSettings.width}" class="nl-text-row">
<f:if condition="{cObj.allSettings.style.cols} == 'textCols2'">
<f:then>
<f:variable name="halfWidth" value="{cObj.allSettings.width / 2}" />
<nl:cols.col width="{halfWidth - 10}" padding="0px" class="textCol1">
<bh:property.text tag="div" property="text" />
</nl:cols.col>
<nl:cols.col width="20" padding="0px" class="textColSpace">
<div class="colSpace"> </div>
</nl:cols.col>
<nl:cols.col width="{halfWidth - 10}" padding="0px" class="textCol2">
<bh:property.text tag="div" property="subtext" />
</nl:cols.col>
</f:then>
<f:else>
<nl:cols.col width="{cObj.allSettings.width}" padding="0px">
<bh:property.text tag="div" property="text" />
</nl:cols.col>
</f:else>
</f:if>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
Typoscript: nl-text.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements {
nl-text < abstract.bhElement
nl-text {
name = Text
hidden = 0
bheListgroup = 10
bheSorting = 10
description = Text-Element
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/text.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-text/nl-text-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-text/
templateFile = nl-text.html
options.oncreate = advanced
paddingVTop = 30px
paddingVBottom = 30px
paddingH = 0
width = 600
dummyData {
text (
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
)
subtext (
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
)
}
styleOptions >
styleOptions.cols {
textCols1 = Text einspaltig
textCols2 = Text zweispaltig
}
styleOptions.color < element.options.nlbgcolor
styleOptions.width < element.options.width
styleOptions.paddingV < element.options.paddingV
style.cols = textCols1
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
## Mediaqueries
element.options.mediaqueries.mobile.nl-text = nl-text-mediaqueries-mobile
Settings-HTML: nl-text-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<!-- STYLES -->
<div class="bhe-formsettings-option">
<label>Spalten</label>
<f:form.select name="style[cols]" value="{cObj.allSettings.style.cols}"
options="{cObj.allSettings.styleOptions.cols}" />
</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">
<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>