Dieser ViewHelper ist vorgesehen, um einen Spalter in einem Responsive Newsletter auszugeben.
Die beiden ViewHelper müssen immer innerhalb eines newsletter:section-ViewHelper sein und müssen miteinander verwendet werden.
Die Summe der Breiten der einzelnen Cols muss immer gleich mit der Breite der Row 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 können der Row- und der Col-ViewHelper des Kind-Elements die Breite des Content-Bereichs auslesen und die Daten des ViewHelpers anpassen.
Dies gilt auch für die ViewHelper newsletter:section & 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 | integer | - | true |
| padding | Padding um den ViewHelper - hier kann mit der CSS-Syntax gearbeitet werden - z. B. '10px 20px' etc... | string | - | false |
| background-color | Hintergrundfarbe - 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:cols.row width="600" padding="0px" class="footerColWrapper">
<newsletter:cols.col width="250" padding="0px" class="footerCol1">
<bh:tmpl.content section="col1" parent="{cObj.uid}" />
</newsletter:cols.col>
<newsletter:cols.col width="350" padding="0px" class="footerCol2">
<bh:tmpl.content section="col2" parent="{cObj.uid}" />
</newsletter:cols.col>
</newsletter:cols.row>
Ausgabe
html
<div style="Margin:0px auto;max-width:600px;" data-property="container">
<table class="mj-row-12345 footerColWrapper" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" style="width:600px; background-color:;">
<tbody>
<tr>
<td class="nlRowContainer nl-row-padding" style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" width="600" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
<tr>
<td style="vertical-align:top;background-color:;" width="250">
<![endif]-->
<div class="mj-column-23456 outlook-group-fix footerCol1" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;background-color:;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td class="nlColContainer nl-col-padding" align="left" style="font-size:0px;padding:0px;word-break:break-word;">
### CONTENTBEREICH 1 ###
</td>
</tr>
</table>
</div>
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-23456 {
width: 250px !important;
max-width: 250px;
box-sizing: border-box;
}
}
</style>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;background-color:;" width="350">
<![endif]-->
<div class="mj-column-34567 outlook-group-fix footerCol2" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;background-color:;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td class="nlColContainer nl-col-padding" align="left" style="font-size:0px;padding:0px;word-break:break-word;">
### CONTENTBEREICH 2 ###
</td>
</tr>
</table>
</div>
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-34567 {
width: 350px !important;
max-width: 350px;
box-sizing: border-box;
}
}
</style>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-row-12345 {
width: 100% !important;
}
}
</style>
</div>