Dieser ViewHelper ist vorgesehen, um eine farblich abgegrenzte Sektion zu erstellen.
Diese Section wird immer im Newsletter benötigt und umschließt den Row- und Col-ViewHelper.
Dieser ViewHelper sollte in jedem Element des Newsletters der äußere Container sein.
Dieser ViewHelper sollte in jedem Element des Newsletters der äußere Container sein.
Achtung
Content-Bereiche in Newsletter-Elementen
Wenn ein Element einen Content-Bereich hat, sollte dieser eine fixe Breite haben und in einer Settings-Variablen des cObj des Elements gespeichert werden. Außerdem muss die Section des Content-Bereichs den gleichen Namen tragen wie die Settings-Variable. Dadurch kann der Section-ViewHelper des Kind-Elements die Breite des Content-Bereichs auslesen und die Daten des ViewHelpers anpassen.
Dies gilt auch für die ViewHelper newsletter:cols.row, newsletter:cols.col & newsletter:property.backgroundImage
Folgender Namespace muss im Templatefile gesetzt werden:
{namespace newsletter=TYPO3\BhNewsletter\ViewHelpers}
{namespace newsletter=TYPO3\BhNewsletter\ViewHelpers}
Attribute
| Name | Beschreibung | Type | default | required |
|---|---|---|---|---|
| width | Breite in Pixel - Bei full-width wird hier die Breite für Outlook angegeben | integer | - | true |
| padding | Padding um den ViewHelper - hier kann mit der CSS-Syntax gearbeitet werden - z. B. '10px 20px' etc... | string | - | false |
| full-width | Wird hier 'true' mitgegeben, wächst die Section auf die volle Breite (außer bei Outlook-Clients) | boolean | false | false |
| background-color | Hintergrundfarbe der Section z. B. '#d1d1d1' | hexcode | - | false |
| class | Hier können Klassen mitgegeben werden, die auf den ersten table bzw. auf den ersten div gelegt werden | string | - | false |
Beispiel
html
<newsletter:section full-width="true" width="800px" background-color="#DADADA" class="headerSection" padding="20px">
###Content###
</newsletter:section>
Ausgabe
html
/* Bei der Option Full-Width: */
<table class="headerSection'" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;background:#DADADA;background-color:#DADADA;">
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="800">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:800px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td class="nl-section-padding" style="direction:ltr;font-size:0px;padding:20px;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;">
<![endif]-->
<div class="outlook-group-fix" style="text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;word-break:break-word;">
### CONTENT ###
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
/* Ohne der Option Full-Width: */
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="headerSection" style="width:800px;" width="800">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="headerSection" style="background:#DADADA;background-color:#DADADA;Margin:0px auto;max-width:100%;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;background:#DADADA;background-color:#DADADA;">
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px';" width="800">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:100%;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td class="nl-section-padding" style="direction:ltr;font-size:0px;padding:20px;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;">
<![endif]-->
<div class="outlook-group-fix" style="text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;word-break:break-word;">
### CONTENT ###
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->