newsletter:cols.row & newsletter:cols.col  

    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}

    Attribute

    NameBeschreibungTypedefaultrequired
    widthBreite in Pixelinteger-true
    paddingPadding um den ViewHelper - hier kann mit der CSS-Syntax gearbeitet werden - z. B. '10px 20px' etc...string-false
    background-colorHintergrundfarbe - z. B. '#d1d1d1'hexcode-false
    classHier können Klassen mitgegeben werden, die auf den ersten table bzw. auf den ersten div gelegt werdenstring-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>