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!
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>