Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.
bh_newsletter
Bild-Element für den Newsletter
HTML-Template: nl-picture.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="nl-picture-section">
<nl:cols.row width="{cObj.allSettings.width}" class="nl-picture-row">
<nl:cols.col width="{cObj.allSettings.width}" padding="0px" class="nl-picture-col">
<nl:picture picture="{cObj.picture}" property="picture" />
<f:if condition="{cObj.allSettings.copyright} && {cObj.picture.copyright}">
<div class="nl-picture-copyright-wrapper">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td class="nl-picture-copyright-padding" align="left">
<p class="nl-picture-copyright">© {cObj.picture.copyright}</p>
</td>
</tr>
</tbody>
</table>
</div>
</f:if>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
Typoscript: nl-picture.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements {
nl-picture < abstract.bhElement
nl-picture {
name = Bild
hidden = 0
bheListgroup = 10
bheSorting = 20
description = Bild-Element
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/picture.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/nl-picture-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/
templateFile = nl-picture.html
allowedData.file = image
link = 1
options.oncreate = advanced
styleOptions >
styleOptions.color < element.options.nlbgcolor
styleOptions.width < element.options.width
styleOptions.paddingV < element.options.paddingV
styleOptions.width {
width-200 = mini (200px)
width-100 = logo (100px)
}
width = 600
max-width = 600
maxWidth = 600
height = 350
imgheight = 350
imgwidth = 600
padding = 0
paddingVTop = 30px
paddingVBottom = 30px
bestate < element.options.backendstate
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
## Mediaqueries
element.options.mediaqueries.mobile.nl-picture = nl-picture-mediaqueries-mobile
## CSS
page.includeCSS {
nl-picture = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/nl-picture.css
nl-picture.forceOnTop = 1
}
Settings-HTML: nl-picture-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<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>Bild-Copyright ausgeben</label>
<f:form.checkbox name="copyright" value="copyright" checked="{cObj.allSettings.copyright}"/>
</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="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>